web-dev-qa-db-fra.com

jquery select change event obtient l'option sélectionnée

J'ai lié un événement à l'événement change de mes éléments sélectionnés avec ceci:

$('select').on('change', '', function (e) {

});

Comment puis-je accéder à l'élément sélectionné lors de l'événement de modification?

jqueryevents
222
Zulakis
$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});
429
Neal

Vous pouvez utiliser la méthode jQuery find

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

La solution ci-dessus fonctionne parfaitement, mais je choisis d’ajouter le code suivant aux personnes désirant obtenir l’option sélectionnée. Il vous permet d’obtenir l’option sélectionnée même lorsque cette valeur de sélection n’a pas changé. (Testé avec Mozilla uniquement)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });
72
Bellash

Alternative déléguée

Si quelqu'un utilise approche déléguée pour son auditeur, utilisez e.target (il fera référence à l'élément select).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

Démo JSFiddle

15
slicedtoad

Je trouve cela plus court et plus propre. En outre, vous pouvez parcourir les éléments sélectionnés s’il en existe plusieurs;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});
5
1.44mb
<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

Commencez par créer un select option. Après cela, en utilisant jquery, vous pouvez obtenir la valeur actuellement sélectionnée lorsque l'utilisateur modifie la valeur select option.

5
user6270989
$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});
2
Serdar Karaca

Un autre moyen rapide d'obtenir la valeur de la valeur sélectionnée,

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});
1
Recep Can

Vous pouvez utiliser cet événement de modification de sélection jquery pour obtenir la valeur d'option sélectionnée

pour démo

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
}); 
<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="Java">Java</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>
0
Developer

Voir la documentation officielle de l'API https://api.jquery.com/selected-selector/

Ce bon fonctionne:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

et

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

et être facile pour un choix unique

var SelVal = $( "#idSelect option:selected" ).val();
0
alex Roosso