web-dev-qa-db-fra.com

Obtenir la valeur sélectionnée d'un élément du menu déroulant à l'aide de jQuery

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 retournent une chaîne vide.

jquery
401
shyam

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

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

Pour obtenir le texte actuellement sélectionné:

$('#dropDownId :selected').text();
766
Peter McG
var value = $('#dropDownId:selected').text()

Devrait bien fonctionner, 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!" />

57
Nick Reeve

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 méthode val() au lieu de text().

Consultez les liens ci-dessous pour le violon.

Demo1 | Demo2

20
Lucky

essaye ça

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

Je sais que c'est un article terriblement ancien et que je devrais probablement être fouetté pour cette pitoyable résurrection, mais je pensais partager quelques extraits très utiles de JS 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 petites bribes à votre fichier global *.js:

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

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

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

Cela me fait gagner un temps précieux, en particulier pour les applications lourdes de formes!

12
DevlshOne

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

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>
8
J Slick

Ça fera l'affaire 

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

Pour le texte sélectionné, utilisez:

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

Pour la valeur sélectionnée, utilisez:

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

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

<select id='dropDownId'> ...

Votre première déclaration devrait fonctionner!

3
schaechtele

utilisation

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

Cela devrait marcher :)

2
Namila

Ou si vous voulez essayer:

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

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

2
SoLiD

La id qui a été générée pour votre contrôle déroulant dans la html sera dynamique. Donc, utilisez l'identifiant complet $('ct100_<Your control id>').val(). Cela fonctionnera. 

2
VenkeHV

Pour obtenir la valeur de jquery du menu déroulant, utilisez simplement la fonction ci-dessous qui vient d’être envoyée id et 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;
}
2
Virendra khade

	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>

1
sakthi sudhan

C'est ce qui fonctionne 

    var value= $('option:selected', $('#dropDownId')).val();
1
Shittu Joseph Olugbenga
$("#selector <b>></b> option:selected").val()

Ou

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

Les codes ci-dessus ont bien fonctionné pour moi

1
Stefan Kelchtermans

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

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

J'espère que ça aide

1
mindmyweb

utiliser l'un ou l'autre de ces codes 

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

OR

$('#dropDownId').text();
1
Bipin
$("select[id$=dropDownId]").val()
  • essaye ça
1
rakesh

Vous devez mettre comme ça.

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

Vous pouvez utiliser n'importe lequel de ceux-ci:

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

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

            //OR

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

});
0
Suresh Burdak

Vous pouvez le faire en utilisant le code suivant.

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

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

$('#dropDownId option:selected').text();
0
Dulith De Costa

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;
0
mahdi hosseini

Si vous avez plus d'un menu déroulant, 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;
    }
0
RGriffiths

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);`
            });
});
0
UTHIRASAMY

Essaye ça:

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

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