jquery select change event get selected option

235

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

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

});

Comment puis-je accéder à l'élément qui a été sélectionné lorsque l'événement de modification se produit?

jquery events Zulakis
la source
1
Pourquoi tu dis ça?
Miguel
3
@superuberduper J'ai évité jquery aussi longtemps que possible, mais la résistance est inutile. Vous vous sentirez tellement mieux après avoir été assimilé.
ADG
lolol @adg si bon!
SuperUberDuper

Réponses:

461 
$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});
Naftali aka Neal
la source
8
Que signifie la syntaxe $ ("selector", this)? J'ai une idée générale, mais je ne suis pas totalement sûr
JoshWillik
14
@JoshWillik avec $("selector", this)vous trouve tous les selectoréléments dans thisle contexte de. L'écriture $("selector", this)est presque la même que $(this).find('selector')
Bellash
8
@JoshWillik: puisqu'il $()s'agit d'un alias de jQuery(), vous pouvez trouver la documentation ici: api.jquery.com/jQuery La signature indiquée y est évidemment jQuery( selector [, context ] ). @Bellash: si c'est "presque le même", quelle est la différence? Ou quoi de plus rapide? Je préfère .find()puisque c'est plus OO IMO ...
Adrian Föder
7
Comment vérifier en cas de sélection multiple?
Hemant_Negi
3
@ AdrianFöder Pour vous et les autres personnes qui le recherchent, .find()c'est environ 10% plus rapide selon cette réponse: stackoverflow.com/a/9046288/2767703
Kevin van Mierlo
75

Vous pouvez utiliser la méthode de recherche jQuery

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

La solution ci-dessus fonctionne parfaitement mais j'ai choisi d'ajouter le code suivant pour eux désireux d'obtenir l'option cliqué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();
   });
Bellash
la source
La liaison aux optionévénements est une proposition risquée, en particulier sur les appareils mobiles. Par exemple, Webkit ne prend pas correctement en charge cet événement: bugs.chromium.org/p/chromium/issues/detail?id=5284
Ian Kemp
OK cool! Comme je l'ai dit, la deuxième solution n'est pas prise en charge dans de nombreux navigateurs!
Bellash
15

Alternative déléguée

Dans le cas où quelqu'un utilise l' 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');
}

JSFiddle Demo

DanielST
la source
+1 parce que c'est ce que je veux, mais quand j'ai essayé cela localement, cela ne fonctionne pas. Ne travaillez que chez jsfiddle, quels sont les CDN dois-je ajouter?
AVI
6

Je trouve cela plus court et plus propre. De plus, vous pouvez parcourir les éléments sélectionnés s'il y en a plusieurs;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});
1,44 Mo
la source
selectedOptionsn'est pas disponible dans tous les navigateurs.
Bernhard Döbler
@ BernhardDöbler lesquels? une source?
1,44 Mo
1
J'ai copié votre code sur IE 11 et j'ai reçu une erreur. Je me suis retrouvé avec this.options[ this.options.selectedIndex ]. Mozilla dit est pris en charge par Firefox à partir du 26, IE Pas de support.
Bernhard Döbler
6 
<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();
});

Créez d'abord un fichier select option. Après cela, jqueryvous pouvez obtenir la valeur sélectionnée actuelle lorsque l'utilisateur modifie la select optionvaleur.


la source
1
pouvez-vous s'il vous plaît partager une explication plus détaillée de votre réponse?
Mostafiz
@MostafizurRahman mon code très facile c'est pourquoi j'ai écrit uniquement du code.
3 
$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});
Serdar Karaca
la source
2

Un autre et court moyen 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, 
});
Recep Can
la source
si tel est le cas, pourquoi "var selectedVal = $ (" # selectElement "). val ()" work¿
LuisE
Le cas obtient une valeur lorsque l'événement change émis sur l'élément select. La valeur ne serait pas mise à jour lorsque vous sélectionnez des modifications si vous aimez cela.
Recep Can
0

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();
alex Roosso
la source
0

Vous pouvez utiliser cet événement jquery select change pour obtenir la valeur de l'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>
Développer l'extrait

Développeur
la source