jQuery récupère la valeur de l'option sélectionnée (pas le texte, mais l'attribut 'valeur')


156

D'accord, j'ai ce code:

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

Et j'aimerais connaître la valeur de l'option sélectionnée. Exemple: «Option 2» est sélectionnée et sa valeur est «2». Le «2» est la valeur que j'ai besoin d'obtenir et non «Option 2».


Tutoriel de démonstration pour obtenir: freakyjolly.com / ... Tutoriel de démonstration pour la configuration de freakyjolly.com/... Boîte de sélection unique et multiple
Code Spy

Réponses:


271

04/2020: Ancienne réponse corrigée

Utiliser : sélecteur psuedo sélectionné sur les options sélectionnées puis utiliser la fonction .val pour obtenir la valeur de l'option.

$('select[name=selector] option').filter(':selected').val()

Remarque : il est préférable d'utiliser le filtre plutôt que d'utiliser le :selectedsélecteur directement dans la première requête.

Si dans un gestionnaire de modifications, vous pouvez utiliser simplement this.valuepour obtenir la valeur d'option sélectionnée. Voir la démo pour plus d'options.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

Ancienne réponse:

Edit: Comme beaucoup l'ont souligné, cela ne renvoie pas la valeur de l'option sélectionnée.

~~ Utilisez .val pour obtenir la valeur de l'option sélectionnée. Voir ci-dessous,

$('select[name=selector]').val()~~

5
Faites votre test:$('select[name=selector]').change(function() { alert($(this).val()); });
KingRider

4
Notez que si l'option sélectionnée n'a aucun valueattribut spécifié, l'étiquette (c'est-à-dire <option>label</option>) sera retournée. Ce n'est peut-être pas toujours ce que vous voulez. Bien entendu, dans la plupart des applications, la valeur est spécifiée.
Czechnology

115

Je voulais juste partager mon expérience

Pour moi,

$('#selectorId').val()

renvoyé null.

Je devais utiliser

$('#selectorId option:selected').val()


1
Ce cas était-il spécifique au navigateur? La dernière version de Chrome ne le permettait-elle pas ou était-ce IE qui ne le prenait pas en charge?
Theodor Solbjørg

1
C'était dans la dernière version de Chrome. Peut-être aussi dans Firefox, mais pas sûr.
David Torres

Je ne sais pas pourquoi cela $('#selectorId option:selected').val()n'a pas fonctionné pour moi. Au lieu de cela, j'ai utilisé$('select option:selected').val()
Francisco Quintero

1
@Francisco Le problème est que $('select option:selected').val()prendra la valeur du premier sélecteur dans le code HTML. Alors qu'avec $('#selectorId option:selected').val()vous pouvez avoir la valeur du sélecteur que vous avez spécifié. Vérifiez les fautes de frappe. Voici un exemple qui montre ce que je viens de dire: codepen.io/anon/pen/Nqgqyz
David Torres


9

Vous devez ajouter un identifiant à votre sélection. Ensuite:
$('#selectorID').val()


J'ai ajouté l'identifiant, j'ai juste oublié de l'ajouter ici.
n00b

1
D'après ce que j'ai lu, l'utilisation d'un identifiant comme sélecteur est la méthode la plus rapide.
Marcus

5

Essaye ça:

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

ou

var data= $('select').find('option:selected').text();

4

vous pouvez utiliser jquerycomme suit

SCÉNARIO

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

FIDDLE est


2

Pour une sélection comme celle-ci

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

... vous pouvez obtenir l'identifiant de cette façon:

$('#list-name option:selected').attr('id');

Ou vous pouvez utiliser la valeur à la place, et l'obtenir de manière simple ...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

comme ça:

$('#list-name').val();

2

L' une de mes options n'a pas eu une valeur: <option>-----</option>. J'essayais d'utiliser if (!$(this).val()) { .. }mais j'obtenais des résultats étranges. Il s'avère que si vous n'avez pas d' valueattribut sur votre <option>élément, il renvoie le texte à l'intérieur au lieu d'une chaîne vide. Si vous ne voulez val()rien retourner pour votre option, assurez-vous d'ajouter value="".


0

Regardez l'exemple:

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>

0
$('#selectorID').val();

OU

$('select[name=selector]').val();

OU

$('.class_nam').val();

@FarhadBagherlo "Continuez à taper" n'est pas un commentaire d'édition utile! Veuillez résumer vos modifications afin que les lecteurs de l'historique des modifications comprennent ce que vous avez fait sans inspecter chaque caractère modifié. Merci!
jpaugh

0

ce code fonctionne très bien pour moi: cela renvoie la valeur de l'option sélectionnée. $ ('# select_id'). find ('option: sélectionnée'). val ();


0
 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

Bien que ce code puisse résoudre le problème, il est préférable d'ajouter de l'élaboration et d'expliquer comment cela fonctionne pour les personnes qui pourraient ne pas comprendre ce morceau de code.
paper1111

@ paper1111 ce sont des fonctions simples. Je peux expliquer si cela est nécessaire. $ ('select [nom = voici le nom de la boîte de sélection]) .change () - la fonction signifie que lorsque nous changeons la fonction d'option de la boîte de sélection, elle fonctionnera. $ (this) .val () - il renvoie la valeur de l'option sélectionnée
Turan Zamanlı

0

Lien source

Utilisez jQuery val () pour GET Selected Value et et text () pour GET Option Text.

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

Modifier l'événement dans la liste déroulante de sélection

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

Clic de bouton

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.