Jquery和具有相同名称的多个字段

Question

我有这个HTML代码：

<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice"   id="lineChoiceA"    value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice"   id="lineChoiceB"    value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>

我有这个JQuery代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
// If Click on Radio
$('[id^="lineChoice"]').click(function(){
// Hide Line
$("#lineA").hide();
$("#lineB").hide();
// Display Line
if($(this).val()=="A")  $("#lineA").show();
if($(this).val()=="B")  $("#lineB").show();
});

// If Change on List
$('#mySelect').change(function(){
// Just Display in Console
console.log($(this).val());
});
}); 
</script>

两条线基本上都是隐藏的。通过选择单选按钮，我显示相应的行。我自愿简化了行的名称(在我的初始代码中更复杂(。

如果我选择行A。JQuery中的显示工作正常。但如果我选择B行，我什么也得不到；选择"；有相同的名字，但这正是我的目标；选择"；只处理显示的一个。

希望我的问题是">为什么选择行B时不显示，而它与行A一起工作…？

Answer 1

一个页面中不能有两个id相同的元素。因此，我为两个选择使用不同的Id来更新您的代码。

为了使用名称注册事件，可以使用属性选择器。CCD_ 1会起作用。

更改事件在线路B上不起作用的原因是，$('#mySelect').change(function(){})只在第一个select上注册事件，结果是Line A <select>

$(document).ready(() => {
$('input[type="radio"]').on('change', (e) => {
$("#lineA").hide();
$("#lineB").hide();
if (e.currentTarget.id === 'lineChoiceA') {
$("#lineA").show();
} else {
$("#lineB").show();
}
})
// If Change on List
$('[name="mySelect"]').change(function() {
// Just Display in Console
console.log($(this).val());
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect1">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect2">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>