获取多个select元素的输入的jQuery给了我错误元素的输出

Question

我在获取< select>标记的输入时遇到了问题。

我想出了这个jQuery代码片段，但有些事情是错误的......如果你运行代码片段，你会发现它总是只输出第一个< select>元素的值，并没有正确输出其他的选项< select> elements ...

//尝试第二个元素。

$("#ONE").on('change', function(eve) { 
 
    console.log($(this).children("option:selected").prop("value")); 
 
    var valueTWO = $("option:selected").prop("value"); 
 
}); 
 

 
$("#TWO").on('change', function(eve) { 
 
    console.log($(this).children("option:selected").prop("value")); 
 
    var valueONE = $("option:selected").prop("value"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <select name="" id="ONE"> 
 
     <option title="A">A</option> 
 
     <option title="B">B</option> 
 
    </select> 
 
    <!-- End td 1 --> 
 
    </td> 
 
    <td> 
 
    <select class="" id='TWO' name=""> 
 
     <option value="C">C</option> 
 
     <option value="D">D</option> 
 
     <option value="E">E</option> 
 
     <option value="F">F</option> 
 
    </select> 
 
    <!-- End td 2 --> 
 
    </td> 
 
    <td>

Answer 1

你$("option:selected")选择并不仅仅限于改变的下拉列表 - 它在说“选择整个页面上的所有选择的选项”，并因为有多个，则返回第一。

尝试这样做，而不是：

$(this).children("option:selected").prop("value") 

这样做$(this).children，你缩小了你的选择，只看改变的下拉菜单中的选项。

话虽这么说，你可以在下拉菜单/选择来获取值做.val()，而不必通过选择选项来遍历：

$('#mySelect').change(function() { 
    console.log($(this).val()); 
}