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
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

461

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

— Naftali aka Neal
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
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
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
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.

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
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
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
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
source