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




Answers


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

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

Pour obtenir le texte actuellement sélectionné:

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



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




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




essaye ça

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



Je sais que c'est un poste terriblement vieux et je devrais probablement être flagellé pour cette résurrection pitoyable, mais j'ai pensé que je partagerais quelques extraits de JS très utiles que j'utilise dans chaque application de mon arsenal ...

Si vous tapez:

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

est en train de vieillir, essayez d'ajouter ces petites 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"); au lieu! Obtenez encore plus colombophile en combinant les deux et en retournant un objet contenant à la fois la value et le text !

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

Cela me fait gagner énormément de temps précieux, surtout sur des applications lourdes!




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>



Ça fera l'affaire

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



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>



Avez-vous fourni votre identifiant select-element avec un identifiant?

<select id='dropDownId'> ...

Votre première déclaration devrait fonctionner!




Essayez ceci, il obtient la valeur:

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




Votre première déclaration devrait fonctionner !!

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

Il renverra la valeur de l'élément actuellement sélectionné.




L' id qui a été généré pour votre contrôle déroulant dans le html sera dynamique. Utilisez donc l'identifiant complet $('ct100_<Your control id>').val(). Ça va marcher.




Ou si vous voulez essayer:

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

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




utilisation

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

Cela devrait fonctionner :)




Pour obtenir la valeur jquery de la liste déroulante, il suffit d'utiliser la fonction ci-dessous juste l' id envoyé et 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;
}



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




$("select[id$=dropDownId]").val()
  • essaye ça



utiliser l'un de ces codes

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

OU

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



C'est ce qui fonctionne

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



Pour le texte sélectionné, utilisez:

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

Pour l'utilisation de la valeur sélectionnée:

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



Vous pouvez utiliser l'un de ces éléments:

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

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

            //OR

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

});



Utilisez simplement ceci

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



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

Ou

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

Les codes ci-dessus ont bien fonctionné pour moi




Vous devez mettre comme ça.

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



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



Essaye ça:

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

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