我是JavaScript和HTML的新手，我希望实现以下结构：
[Drop down 1]
[Option 1]
[Option 2]
[Drop down 2]
[Option 1]
[Option 2]
..and so on
然后我想要在TD下面反映的选项如下：
<td> </td><td class="sel1">Selected option from drop-down 1</td>
<td> </td><td class="sel2">Selected option from drop-down 2</td>
..and so on
更新：根据Joshua 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>
任何人都可以向我提供有关如何实现此结果的任何提示或资源吗？
答案 0 :(得分：1)
你在HTML中混淆了id与类的使用，因此很难在javascript中引用。
对页面上的唯一元素使用id，对类似元素使用类。
这样你就可以附加一个事件处理程序来一次选择元素。
当然，你可以有一个for循环连接到id为'sel'+ count的select，但效率很低。
$(function() {
$('.selection').on('change', function(){
var sel_id = $(this).attr('data-id');
var sel_opt = $(this).val();
$('table td#'+sel_id).text(sel_opt)
})
});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>