jQuery obtient la valeur de la sélection onChange

Question

J'avais l'impression que je pouvais obtenir la valeur d'une entrée de sélection en faisant ceci $(this).val(); et en appliquant le onchange au champ de sélection.

Il semblerait que cela ne fonctionne que si je fais référence à l'ID.

Comment puis-je le faire en utilisant ceci.

Answer 1

Essayez ceci.

$('select').on('change', function() {
  alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Vous pouvez également faire référence avec onchange event-

function getval(sel)
{
    alert(sel.value);
}

<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Answer 2

J'avais l'impression que je pouvais obtenir la valeur d'une entrée select en faisant ceci $(this).val() ;

Cela fonctionne si vous vous abonnez de manière discrète (ce qui est l'approche recommandée) :

$('#id_of_field').change(function() {
    // $(this).val() will work here
});

si vous utilisez onselect et mélanger le balisage avec script vous devez passer une référence à l'élément courant :

onselect="foo(this);"

et ensuite :

function foo(element) {
    // $(element).val() will give you what you are looking for
}

Answer 3

Cela m'a aidé.

Pour sélectionner :

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Pour une radio ou une case à cocher :

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

Answer 4

Essayez la méthode de délégation d'événements, cela fonctionne dans presque tous les cas.

$(document.body).on('change',"#selectID",function (e) {
   //doStuff
   var optVal= $("#selectID option:selected").val();
});

Answer 5

La fonction flèche a une portée différente de la fonction, this.value donnera undefined pour une fonction flèche. Pour corriger cela, utilisez

$('select').on('change',(event) => {
     alert( event.target.value );
 });