jQuery bekommen Eingang von mehreren Select-Element gibt mir die Ausgabe von falschen Element

Question

Ich habe Probleme mit der Eingabe eines < Select> -Tag.

Ich habe dieses jQuery-Snippet herausgefunden, aber etwas stimmt nicht ... Wenn Sie das Snippet ausführen, sehen Sie, dass es immer nur den Wert des ersten Elements ausgibt und die Option des anderen < nicht korrekt ausgibt Wählen Sie> Elemente ...

// Versuchen Sie das zweite Element.

$("#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

Ihr $("option:selected") Selektor ist nicht nur auf die geänderte Auswahl beschränkt zu sein - es sagt „Wählen Sie alle ausgewählten Optionen auf der gesamten Seite“, und weil es mehrere sind, es gibt die zuerst.

Versuchen Sie stattdessen tun:

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

von $(this).children tun, haben Sie Ihre Wähler verengt nur innerhalb der geänderten Dropdown auf Optionen zu suchen.

Dass gesagt wird, können Sie eine .val() auf einem Drop-Down-do/Wählen Sie den Wert zu erhalten, anstatt durch die gewählten Optionen zu durchlaufen mit:

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