ミラー複数選択フィールドjqueryの/ javascriptの

私はJavaScriptとHTMLに新しいですし、私は次のような構造を実現したい：ミラー複数選択フィールドjqueryの/ javascriptの

[Drop down 1] 
       [Option 1] 
       [Option 2] 
[Drop down 2] 
       [Option 1] 
       [Option 2] 
..and so on

その後、私は選択肢がTDのように、以下のに反映したい：

<td>&nbsp;</td><td class="sel1">Selected option from drop-down 1</td> 
<td>&nbsp;</td><td class="sel2">Selected option from drop-down 2</td> 
..and so on

UPDATE：ジョシュアKisubiからの要求ごととして追加Jfiddle：https://jsfiddle.net/2ra5ptk1/1/

td { 
 
    font-family: calibri; 
 
    font-size: 14px; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
} 
 

 
select, 
 
body { 
 
    font-family: calibri; 
 
    font-size: 14px; 
 
}

<body> 
 
    I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br> 
 
    <table cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
     <td> 
 
     Selection 1:<br> 
 
     <select class="selection1"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel1: Option 1</option> 
 
        <option value="option1">Sel1: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection2"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel2: Option 1</option> 
 
        <option value="option1">Sel2: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection3"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel3: Option 1</option> 
 
        <option value="option1">Sel3: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection4"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel4: Option 1</option> 
 
        <option value="option1">Sel4: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection5"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel5: Option 1</option> 
 
        <option value="option1">Sel5: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection6"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel6: Option 1</option> 
 
        <option value="option1">Sel6: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection7"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel7: Option 1</option> 
 
        <option value="option1">Sel7: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection8"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel8: Option 1</option> 
 
        <option value="option1">Sel8: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection9"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel9: Option 1</option> 
 
        <option value="option1">Sel9: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection10"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel10: Option 1</option> 
 
        <option value="option1">Sel10: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection11"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel11: Option 1</option> 
 
        <option value="option1">Sel11: Option 2</option> 
 
       </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection12"> 
 
        <option value="choose">[Choose]</option> 
 
        <option value="option2">Sel12: Option 1</option> 
 
        <option value="option1">Sel12: Option 2</option> 
 
       </select> 
 
     </td> 
 
     <td> 
 
     <table cellpadding="0" cellspacing="0"> 
 
      <tr> 
 
      <td>Result from selection 1:</td> 
 
      <td class="sel1">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 2:</td> 
 
      <td class="sel2">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 3:</td> 
 
      <td class="sel3">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 4:</td> 
 
      <td class="sel4">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 5:</td> 
 
      <td class="sel5">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 6:</td> 
 
      <td class="sel6">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 7:</td> 
 
      <td class="sel7">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 8:</td> 
 
      <td class="sel8">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 9:</td> 
 
      <td class="sel9">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 10:</td> 
 
      <td class="sel10">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 11:</td> 
 
      <td class="sel11">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 12:</td> 
 
      <td class="sel12">RESULT HERE</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

誰も私にこの結果を達成するためにどのように任意のヒントやリソースを与えることができますか？

出典

2017-12-14 Streching my competence

がdropdown1から値を取得し、SEL1に挿入し、そう – JoshKisb

こんにちは@JoshuaKisubiに、はい、それは私が必要とするまさにです。 –

はい、そうです。あなたは有効なhtml jsを提供していないので、私は何もできません。好ましくは、実際のコードをjsfiddle – JoshKisb

あなたのHTMLのidとクラスの使い分けを混ぜ合わせて、javascriptで参照するのは難しいです。ページ上の一意の要素にidを使用し、類似した要素に対してもクラスを使用します。このようにして、一度に要素を選択するイベントハンドラをアタッチすることができます。もちろん、forループを付けてID 'sel'+ countで選択することもできますが、それは非効率的です。

$(function() { 
 
\t $('.selection').on('change', function(){ 
 
\t \t var sel_id = $(this).attr('data-id'); 
 
\t \t var sel_opt = $(this).val(); 
 
    
 
\t \t $('table td#'+sel_id).text(sel_opt) 
 
\t }) 
 
});

td { 
 
    font-family:calibri; 
 
    font-size:14px; 
 
    border:1px solid rgba(0,0,0,0.2); 
 
} 
 

 
select, body { 
 
    font-family:calibri; 
 
    font-size:14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br> 
 
    <table cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
     <td> 
 

 
     Selection 1:<br> 
 
     <select class="selection" data-id="sel1"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel1: Option 1</option> 
 
      <option value="option1">Sel1: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel2"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel2: Option 1</option> 
 
      <option value="option1">Sel2: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel3"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel3: Option 1</option> 
 
      <option value="option1">Sel3: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel4"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel4: Option 1</option> 
 
      <option value="option1">Sel4: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel5"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel5: Option 1</option> 
 
      <option value="option1">Sel5: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel6"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel6: Option 1</option> 
 
      <option value="option1">Sel6: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel7"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel7: Option 1</option> 
 
      <option value="option1">Sel7: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel8"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel8: Option 1</option> 
 
      <option value="option1">Sel8: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel9"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel9: Option 1</option> 
 
      <option value="option1">Sel9: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel10"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel10: Option 1</option> 
 
      <option value="option1">Sel10: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel11"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel11: Option 1</option> 
 
      <option value="option1">Sel11: Option 2</option> 
 
     </select> 
 
     <br><br>Selection 1:<br> 
 
     <select class="selection" data-id="sel12"> 
 
      <option value="choose">[Choose]</option> 
 
      <option value="option2">Sel12: Option 1</option> 
 
      <option value="option1">Sel12: Option 2</option> 
 
     </select> 
 

 
     </td><td> 
 

 
     <table cellpadding="0" cellspacing="0"> 
 
      <tr> 
 
      <td>Result from selection 1:</td><td id="sel1">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 2:</td><td id="sel2">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 3:</td><td id="sel3">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 4:</td><td id="sel4">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 5:</td><td id="sel5">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 6:</td><td id="sel6">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 7:</td><td id="sel7">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 8:</td><td id="sel8">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 9:</td><td id="sel9">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 10:</td><td id="sel10">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 11:</td><td id="sel11">RESULT HERE</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Result from selection 12:</td><td id="sel12">RESULT HERE</td> 
 
      </tr> 
 
     </table> 
 

 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body>

出典

2017-12-14 17:56:21 JoshKisb

で質問を更新しました。ちょっとニットピック - 代わりに '$（this）.data（ 'id'）;'を使うことができます'$（this）.attr（ 'data-id'）;' https://api.jquery.com/jquery.data/ –

Cool @JoshKisb！非常にエレガントで、私は論理を理解しています。私はそれを覚えているでしょう。ありがとうございました！ –

ミラー複数選択フィールドjqueryの/ javascriptの

答えて

関連する問題