jQueryが複数のselect要素を入力すると、間違った要素が出力されます

Question

< select>タグの入力に問題があります。

私はこのjQueryスニペットを理解しましたが、何かが間違っています...スニペットを実行すると、常に最初の< select要素の値が出力されていて、もう1つの< select>要素...

// 2番目の要素を試してください。

$("#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を行うことで、あなただけの変更ドロップダウンメニュー内のオプションを見て、あなたのセレクタを絞り込むました。

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