jquery sélectionnez modifier l'événement obtenir de l'option sélectionnée

Que j'ai lié à un événement sur l'événement de changement de mon sélectionner des éléments avec cette:

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

});

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

  • Pourquoi tu dis ça?
  • J'ai évité de jquery pour aussi longtemps que je le pouvais, mais la résistance est futile. Vous vous sentirez tellement mieux après que vous avez été assimilée.
  • lolol @adg tellement bon!
InformationsquelleAutor Zulakis | 2012-10-05
  1. 444
    $('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});
    • Ce qui ne l' $("sélecteur", this) syntaxe veux dire? J'ai une idée générale, mais je ne suis pas totalement sûr
    • avec $("selector", this) vous êtes à la recherche de tous les selector éléments à l'intérieur de thiss'contexte. Écrit $("selector", this) est presque la même que $(this).find('selector')
    • Est-il une documentation pour cela quelque part? J'ai regardé autour de jQuery docs et ne trouve rien.
    • depuis $() est un alias de jQuery(), vous pouvez trouver de la documentation ici: api.jquery.com/jQuery La signature a déclaré il y a évidemment jQuery( selector [, context ] ). @Bellash: si c'est "presque la même chose", quelle est la différence? Ou ce qui est plus rapide? Je préfère .find() puisque c'est plus OO OMI...
    • Comment vérifier en cas de sélection multiple?
    • obtenir le changement de l'option pour une sélection multiple.
    • Hmm je ne sais pas de la main gauche, qui pourrait faire un bon débordement de pile question si elle n'a pas été posée déjà 🙂 Laissez-moi savoir si vous trouvez la réponse 😀
    • Pour vous et les autres personnes à la recherche pour elle, .find() est environ 10% plus rapide en fonction de cette réponse: stackoverflow.com/a/9046288/2767703

    InformationsquelleAutor Naftali aka Neal
  2. 75

    Vous pouvez utiliser le jQuery trouver méthode

     $('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 décide d'ajouter le code suivant pour eux souhaitent que l'cliqué sur l'option. Il vous permet d'obtenir l'option sélectionnée, même lorsque cette valeur n'a pas changé. (Testé avec Mozilla uniquement)

        $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });
    • La liaison à option événements est une proposition risquée, en particulier sur les appareils mobiles. Par exemple, Webkit ne prend pas en charge cet événement correctement: bugs.chromium.org/p/chromium/issues/detail?id=5284
    • Ok cool! Comme je l'ai dit, la deuxième solution n'est pas pris en charge dans la plupart des navigateurs!
    InformationsquelleAutor Bellash
  3. 15

    Délégué Alternative

    Au cas où quelqu'un est à l'aide de la délégué approche pour leur écoute, utiliser e.target (il s'en réfère à 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 Démo

    • +1 parce que c'est ce que je veux, mais quand j'ai essayé cette localement, sa ne fonctionne pas .Travaille seulement sur jsfiddle, quels sont les CDN, dois-je ajouter?
    InformationsquelleAutor slicedtoad
  4. 6

    Je trouve cela plus court et plus. En outre, vous pouvez parcourir les éléments sélectionnés s'il y a plus d'un;

    $('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});
    • selectedOptions n'est pas disponible dans tous les navigateurs.
    • lesquels? n'importe quelle source?
    • J'ai copié ton code pour IE 11 et il a eu une erreur. J'ai fini avec this.options[ this.options.selectedIndex ]. Mozilla dit est pris en charge par Firefox à partir de 26, c'est à dire Pas de soutien.
    InformationsquelleAutor 1.44mb
  5. 5
    <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();
});

    D'abord créer un select option. Après que l'utilisation de jquery vous pouvez obtenir de l'actuelle valeur sélectionnée lorsque l'utilisateur de changer le select option valeur.

    • pouvez-vous s'il vous plaît partager plus en détail l'explication de votre réponse ?
    • mon code très facile, c'est pourquoi j'ai écrit seul code.
    InformationsquelleAutor
  6. 3
    $('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});
    InformationsquelleAutor Serdar Karaca
  7. 2

    L'autre et court chemin pour obtenir la valeur de la valeur sélectionnée, 

    $('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});
    • si c'est le cas, pourquoi pas "var selectedVal=$("#selectElement").val()" travail¿
    • L'affaire est prise en valeur lors de l'événement de modification émis sur sélectionner l'élément. La valeur ne serait pas mis à jour lors de la sélection des modifications si vous ne comme ça.
    InformationsquelleAutor Recep Can
  8. 0

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

    Ce les bonnes œuvres:

    $( "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();
    InformationsquelleAutor alex Roosso
  9. 0

    Vous pouvez utiliser cette jquery sélectionnez modifier l'événement pour être sélectionné, la valeur d'option

    Pour La Démo

    JS:

    $(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
});

    HTML:

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

    InformationsquelleAutor Developer