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

Question

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

Comment puis-je obtenir la valeur sélectionnée d'une liste déroulante en utilisant 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.

384

jquery

demandé sur Arslan Ali 2010-05-06 15:08:51

28 réponses

score 735 · Answer 1

Pour sélectionner des éléments dom uniques, pour obtenir la valeur actuellement sélectionnée:

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

Pour obtenir le texte actuellement sélectionné:

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

score 54 · Answer 2

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

score 18 · Answer 3

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 de violon ci-dessous.

Demo1 | Demo2

score 14 · Answer 4

Essayez ceci

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

14

répondu Kvadiyatar 2013-03-12 10:32:56

score 12 · Answer 5

Je sais que c'est un post terriblement ancien et je devrais probablement être fouetté pour cette résurrection pitoyable, mais je pensais partager 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 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 chic en combinant les deux et en retournant un objet contenant à la fois le value et le text!

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

Cela me permet d'économiser une tonne de temps précieux, surtout sur les applications lourdes!

score 8 · Answer 6

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>

score 7 · Answer 7

Cela fera l'affaire

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

7

répondu Singleton 2013-03-03 07:12:03

score 7 · Answer 8

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>

score 3 · Answer 9

Avez-vous fourni votre élément select avec un id?

<select id='dropDownId'> ...

Votre première déclaration devrait fonctionner!

score 3 · Answer 10

Pour le texte sélectionné, utilisez:

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

Pour la valeur sélectionnée utiliser:

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

score 3 · Answer 11

Essayez ceci, il obtient la valeur:

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

3

répondu Ângelo Rigo 2017-02-15 18:25:48

score 2 · Answer 12

Le id qui a généré pour votre déroulant de contrôle dans le html sera dynamique. Utilisez donc l'id complet $('ct100_<Your control id>').val(). cela fonctionnera.

score 2 · Answer 13

, Ou si vous essayez :

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

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

score 2 · Answer 14

Utiliser

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

Cela devrait fonctionner :)

2

répondu Namila 2015-10-23 10:01:25

score 2 · Answer 15

Pour obtenir la valeur jquery de la liste déroulante, vous 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;
}

score 1 · Answer 16

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

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

J'espère que cela aide

score 1 · Answer 17

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

Essayez ceci

1

répondu rakesh 2014-03-14 06:34:42

score 1 · Answer 18

Utilisez l'un de ces codes

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

Ou

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

score 1 · Answer 19

C'est ce qui fonctionne

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

1

répondu Shittu Joseph Olugbenga 2015-10-28 12:06:09

score 1 · Answer 20

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

Ou

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

Codes ci-Dessus a bien fonctionné pour moi

score 0 · Answer 21

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

});

score 0 · Answer 22

, Vous devez mettre comme ça.

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

0

répondu Arthur Salgado 2017-02-15 18:05:05

score 0 · Answer 23

Essayez ceci:

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

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

score 0 · Answer 24

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

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

score 0 · Answer 25

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. Cela fera l'affaire.

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

score 0 · Answer 26

	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>

score -1 · Answer 27

$("#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>

score -1 · Answer 28

Cela devrait fonctionner pour vous

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

Las etiquetas más populares

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

28 réponses