Obtenir la valeur sélectionnée d'une liste déroulante de l'élément à l'aide de jQuery

Comment puis-je obtenir la valeur sélectionnée d'une zone de liste déroulante à l'aide de jQuery?

J'ai essayé d'utiliser

var value = $('#dropDownId').val();

var value = $('select#dropDownId option:selected').val();

mais les deux renvoie une chaîne vide.

Les deux doivent travailler. Le problème doit être ailleurs (p. ex. est-ce que le code enveloppé dans un $(document).ready(... bloc?)
var value = $('#dropDownId:selected').val();
Nope - $('#dropDownId').val(); est le plus concis manière à obtenir la valeur sélectionnée.
vous n'avez pas besoin de sélectionner dans cette proposition, car les Id sont uniques pour un document, vous devez utiliser la balise de nom seulement lorsque se référant à des catégoriesselect#dropDownId option:selected,
double possible de Comment faire pour obtenir l'Index de select->option balise
Consulter cet article : javascriptstutorial.com/blog/...
On peut consulter cet article: javascriptstutorial.com/blog/...

InformationsquelleAutor shyam | 2010-05-06

jquery

793

Pour seule sélectionnez les éléments dom, pour obtenir la valeur actuellement sélectionnée:
```
$('#dropDownId').val();
```
Pour obtenir le texte actuellement sélectionné:
```
$('#dropDownId :selected').text();
```
- Vous avez besoin d'un espace avant :selected.
- le rapide moyen d'en obtenir le texte de l'option sélectionnée est: $("#dropDownId").children("option").filter(":selected").text()
- je vous souhaite a références liées à .val() et .text()
- Richard, votre code est trop long...il peut être beaucoup plus concis pour des raisons de lisibilité
- et comment savoir quel index est sélectionné?
- Au Point de Partage de 2010 où id obtient renommé, cela fonctionne. $("[id$='dropDownId']").val() et $("[id$='dropDownId']").les enfants("option").filtre(":selected").texte() grâce RickardN
- Que faire si vous ne connaissez pas l'id de la <select>, et vous avez seulement un DOM référence?
- un DOM de référence stockée dans une variable? Ensuite, utilisez jQuery(domVariable).val()
- javascriptstutorial.com/blog/...
InformationsquelleAutor Peter McG

var value = $('#dropDownId:selected').text()

Devrait fonctionner correctement, voir cet exemple:

JS:

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

la "valeur" est ce que la plupart des codeurs miss, tout en déclarant elementsand requête ne cesse de revenir texte au lieu
Vérifier la démo ici freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

InformationsquelleAutor Nick Reeve

21

Essayer cette jQuery,
```
$("#ddlid option:selected").text();
```
ou ce javascript,
```
 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;
```
Si vous avez besoin d'accéder à la valeur et non le texte et essayez de l'utiliser val() méthode au lieu de text().

Découvrez ci-dessous le violon liens.

Demo1 | Demo2
- Un de plus, pour la traduction javascript! Utile si vous devez le faire en ligne...
- ne peux pas dire pourquoi.. mais seulement celui-ci a travaillé
InformationsquelleAutor
14

essayer cette
```
$("#yourDropdown option:selected").text();
```
- L'OP est demandé à la valeur sélectionnée. Cette réponse serait d'obtenir le contenu du texte de la liste déroulante. Pas mal, juste pas ce qu'il demandait.
InformationsquelleAutor Kvadiyatar
12

Je sais que c'est un très vieux post et je devrais probablement être fouetté pour cette pitoyable de la résurrection, mais j'ai pensé que je voudrais partager quelques TRÈS utile peu de JS extraits de code que j'utilise tout au long de chaque application dans mon arsenal...

Si en tapant:
```
$("#selector option:selected").val() //or
$("#selector option:selected").text()
```
se fait vieux, essayez d'ajouter ces petits crumpets à votre *.js fichier:
```
function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}
```
et il suffit d'écrire soval("#selector"); ou sotext("#selector"); à la place! Obtenez encore plus fantaisiste en combinant les deux et retourne un objet contenant à la fois le value et la text!
```
function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}
```
Il me permet d'économiser une tonne de temps précieux, en particulier sur la forme de lourdes applications!

InformationsquelleAutor DevlshOne

Cette alerte à la valeur sélectionnée.
JQuery...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

Code HTML...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>

InformationsquelleAutor Uthaiah

Encore testé un autre exemple:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>

InformationsquelleAutor J Slick

7

cela fera l'affaire
```
$('#dropDownId').val();
```
InformationsquelleAutor Singleton
3

Avez-vous de fournir à votre sélectionnez l'élément avec un id?
```
<select id='dropDownId'> ...
```
Votre première déclaration devrait fonctionner!

InformationsquelleAutor schaechtele
3

Pour le texte sélectionné utiliser:
```
value: $('#dropDownId :selected').text();
```
Pour la valeur sélectionnée utilisation:
```
value: $('#dropDownId').val();
```
InformationsquelleAutor mahi
3

Essayer cela, il obtient la valeur:

$('select#myField').find('option:selected').val();

InformationsquelleAutor Ângelo Rigo
2

La id qui a généré pour votre déroulant de contrôle dans le html sera dynamique. Donc, utiliser l'identification $('ct100_<Your control id>').val(). Il va travailler.

InformationsquelleAutor VenkeHV
2

Ou si vous voulez essayer :
```
$("#foo").find("select[name=bar]").val();
```
Je l'ai utilisé aujourd'hui et Il fonctionne bien.

InformationsquelleAutor SoLiD
2

utilisation
```
$('#dropDownId').find('option:selected').val()
```
Cela devrait fonctionner 🙂

InformationsquelleAutor Namila

Pour obtenir le jquery valeur à partir de la liste déroulante, vous utilisez juste en dessous de la fonction vient d'envoyer id et d'obtenir la valeur sélectionnée:

function getValue(id){
    var value = "";
    if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
        for(var i=0;i<$('#'+id)[0].length;i++){
            if($('#'+id)[0][i].selected == true){
                if(value != ""){
                    value = value + ", ";
                }
                value = value + $('#'+id)[0][i].innerText;
            }
        }
    }
    return value;
}

InformationsquelleAutor Virendra khade

JS:

	function fundrp(){
	var text_value = $("#drpboxid option:selected").text();  
	console.log(text_value);
	var val_text = $("#drpboxid option:selected").val();  
	console.log(val_text);
	var value_text = $("#drpboxid option:selected").attr("vlaue") ;
	console.log(value_text);
	var get_att_value = $("#drpboxid option:selected").attr("id") 
	console.log(get_att_value);
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
	<option id="1_one" vlaue="one">one</option>
	<option id="2_two" vlaue="two">two</option>
	<option id="3_three" vlaue="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>

Ajouter quelques explications avec votre code.
je vous remercie.. très utile pour moi 🙂

InformationsquelleAutor sakthi sudhan

1

Je sais c'est vieux mais je mais je l'ai mise à jour avec un plus haut à la date de réponse
```
$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});
```
J'espère que cette aide

InformationsquelleAutor mindmyweb
1
```
$("select[id$=dropDownId]").val()
```
- essayer cette
InformationsquelleAutor rakesh

l'utilisation de ces codes

$('#dropDownId :selected').text();

$('#dropDownId').text();

InformationsquelleAutor Bipin

1

C'est ce qui fonctionne
```
    var value= $('option:selected', $('#dropDownId')).val();
```
InformationsquelleAutor Shittu Joseph Olugbenga

$("#selector <b>></b> option:selected").val()

$("#selector <b>></b> option:selected").text()

Codes ci-dessus a bien fonctionné pour moi

InformationsquelleAutor Stefan Kelchtermans

1

Vous pouvez le faire en utilisant le code suivant.
```
$('#dropDownId').val();
```
Si vous voulez obtenir la valeur sélectionnée de la liste de sélection options. Cela fera l'affaire.
```
$('#dropDownId option:selected').text();
```
InformationsquelleAutor Dulith De Costa

Vous pouvez utiliser l'un de ces:

$(document).on('change', 'select#dropDownId', function(){

            var value = $('select#dropDownId option:selected').text();

            //OR

            var value = $(this).val();

});

InformationsquelleAutor Suresh Burdak

0

Vous avez besoin de mettre ce genre.
```
$('[id$=dropDownId] option:selected').val();
```
InformationsquelleAutor Arthur Salgado

Essayez ceci:

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();

InformationsquelleAutor saravanajd

Utiliser la méthode ci-dessous pour obtenir la valeur sélectionnée sur la page de chargement:

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

InformationsquelleAutor UTHIRASAMY

Si vous avez plus d'une liste déroulante d'essayer:

HTML:

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

JavaScript:

    function myFunction(sel) {
        var selected = sel.value;
    }

InformationsquelleAutor RGriffiths

-1

$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>

C'est une bonne pratique sur le Débordement de la Pile d'ajouter une explication quant à pourquoi votre solution devrait fonctionner. Pour plus d'informations, lisez Comment Répondre.

InformationsquelleAutor Muddassir Irahad

-1

cela devrait fonctionner pour vous

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

InformationsquelleAutor mohamed ruzaik

Vous devez vous connecter pour publier un commentaire.