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

443

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

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

et

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

mais les deux renvoient une chaîne vide.

jquery

— shyam
source

3

Les deux devraient fonctionner. Le problème doit être ailleurs (par exemple, ce code est-il enveloppé dans un $(document).ready(...bloc?)

— karim79

4

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

— et

2

Non - $('#dropDownId').val();est le moyen le plus concis pour obtenir la valeur sélectionnée.

— karim79

1

@shyam vous ne avez pas besoin de sélectionner dans cette déclaration car les ID sont uniques pour le document, vous devez utiliser uniquement le nom de la balise lorsque les classes se référant à select#dropDownId option:selected,

— ant

doublon possible de Comment obtenir l'index de la balise select-> option

— Chris Moschini

841

Pour les éléments dom à sélection unique, pour obtenir la valeur actuellement sélectionnée:

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

Pour obtenir le texte actuellement sélectionné:

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

— Peter McG
source

11

Vous avez besoin d'un espace avant :selected.

— interjay

53

le moyen le plus rapide d'obtenir le texte de l'option sélectionnée est:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

je souhaite que vous ayez lié des références à .val()et.text()

— shareef

8

Richard, votre code est trop long ... il peut être beaucoup plus concis pour la lisibilité

— PositiveGuy

2

@ JamesM.Lay une référence DOM stockée dans une variable? Ensuite, utilisezjQuery(domVariable).val()

— Allen Linatoc

57

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

Devrait fonctionner correctement, voir cet exemple:

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

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

Développer l'extrait

— Nick Reeve
source

4

"valeur" est ce que la plupart des codeurs manquent, tout en déclarant les éléments et les requêtes continuent de renvoyer du texte à la place

— Asad

Consultez la démo ici freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Code Spy

22

Essayez cette jQuery,

$("#ddlid option:selected").text();

ou ce javascript,

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

Si vous devez accéder à la valeur et non au texte, essayez d'utiliser la val()méthode au lieu de text().

Consultez les liens ci-dessous.

Demo1 | Demo2

— chance
source

14

essaye ça

$("#yourDropdown option:selected").text();

— Kvadiyatar
source

OP demande la valeur sélectionnée. Cette réponse obtiendrait le contenu textuel de la liste déroulante. Pas mal, tout simplement pas ce qu'il demandait.

— Joshua Dance

12

Je sais que c'est un post terriblement ancien et je devrais probablement être fouetté pour cette pitoyable résurrection, mais je pensais que je partagerais quelques petits extraits JS TRÈS utiles que j'utilise dans toutes les applications de mon arsenal ...

Si vous tapez:

$("#selector option:selected").val() // or
$("#selector option:selected").text()

vieillit, essayez d'ajouter ces petits crumpets à votre *.jsfichier global :

function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}

et écrivez soval("#selector");ou à la sotext("#selector");place! Obtenez encore plus de fantaisie en combinant les deux et en retournant un objet contenant à la fois le valueet le text!

function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}

Cela me fait gagner une tonne de temps précieux, en particulier sur les applications lourdes en forme!

— DevlshOne
source

9

Cela alertera la valeur sélectionnée. Code 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>

— Uthaiah
source

8

Ça fera l'affaire

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

— Singleton
source

8

Encore un autre exemple testé:

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

— J Slick
source

4

Essayez ceci, il obtient la valeur:

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

— Ângelo Rigo
source

3

Avez-vous fourni votre élément de sélection avec un identifiant?

<select id='dropDownId'> ...

Votre première déclaration devrait fonctionner!

— Schaechtele
source

3

Pour le texte sélectionné, utilisez:

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

Pour la valeur sélectionnée, utilisez:

value: $('#dropDownId').val();

— mahi
source

2

Celui idqui a été généré pour votre contrôle déroulant dans htmlsera dynamique. Utilisez donc l'id complet. $('ct100_<Your control id>').val().Cela fonctionnera.

— VenkeHV
source

2

Ou si vous essayez:

$("#foo").find("select[name=bar]").val();

Je l'ai utilisé aujourd'hui et ça fonctionne bien.

— Solide
source

2

utilisation

$('#dropDownId').find('option:selected').val()

Cela devrait fonctionner :)

— Namila
source

2

Pour obtenir la valeur jquery du menu déroulant, utilisez simplement la fonction ci-dessous qui vient d'être envoyée idet obtenez 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;
}

— Virendra khade
source

La manière ardue de le faire, mais ce qui fonctionne.

— MC9000

2

	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);
}

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

Développer l'extrait

— sakthi sudhan
source

1

Je sais que c'est vieux mais je pense que je le mets à jour avec une réponse plus à jour

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

J'espère que ça aide

— mindmyweb
source

1

$("select[id$=dropDownId]").val()

essaye ça

— rakesh
source

1

utilisez l'un de ces codes

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

OU

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

— Bipin
source

1

Voilà ce qui fonctionne

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

— Shittu Joseph Olugbenga
source

1

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

Ou

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

Les codes ci-dessus ont bien fonctionné pour moi

— Stefan Kelchtermans
source

1

Vous pouvez le faire en utilisant le code suivant.

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

Si vous souhaitez obtenir la valeur sélectionnée à partir des options de la liste de sélection. Ça fera l'affaire.

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

— Dulith De Costa
source

0

Vous pouvez utiliser n'importe lequel de ces éléments:

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

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

            //OR

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

});

— Suresh Burdak
source

0

Vous devez mettre comme ça.

$('[id$=dropDownId] option:selected').val();

— Arthur Salgado
source

0

Essaye ça:

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

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

— saravanajd
source

0

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

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

— UTHIRASAMY
source

0

Si vous avez plusieurs listes déroulantes, essayez:

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

— RGriffiths
source

0

HTML:

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>

JavaScript:

var value = $('#SecondSelect')[0].value;

— mahdi hosseini
source

Veuillez inclure une explication de comment et pourquoi cela résout le problème aiderait vraiment à améliorer la qualité de votre message, et entraînerait probablement plus de votes positifs.

— Android

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

— Muddassir Irahad
source

-1

cela devrait fonctionner pour vous

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

— mohamed ruzaik
source

Que faire si votre option de liste déroulante a été marquée comme sélectionnée par programme (comme dans une demande ajax qui remplit une liste déroulante)? Si vous essayez d'obtenir un .val (), vous obtiendrez null pour la valeur (même si l'inspection de la source vous montrera que l'option est en effet sélectionnée)! $ ("option myDD: sélectionné"). val () donnera undefined.

— MC9000