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

14

essaye ça

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

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

8

Ça fera l'affaire

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

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

4

Essayez ceci, il obtient la valeur:

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

Ângelo Rigo
la 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
la source

3

Pour le texte sélectionné, utilisez:

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

Pour la valeur sélectionnée, utilisez:

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

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

2

Ou si vous essayez:

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

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

Solide
la source

2

utilisation

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

Cela devrait fonctionner :)

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

1

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

essaye ça

rakesh
la source

1

utilisez l'un de ces codes

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

OU

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

Bipin
la source

1

Voilà ce qui fonctionne

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

Shittu Joseph Olugbenga
la 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
la 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
la 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
la source

0

Vous devez mettre comme ça.

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

Arthur Salgado
la source

0

Essaye ça:

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

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

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

-1

cela devrait fonctionner pour vous

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

mohamed ruzaik
la 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

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

Réponses: