Erhalte den ausgewählten Wert eines Dropdown-Items mit jQuery


Wie kann ich den ausgewählten Wert einer Dropdown-Box mit jQuery ermitteln?
Ich habe versucht mit

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

und

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

aber beide geben eine leere Zeichenfolge zurück.


Answers


Für einzelne select-dom-Elemente, um den aktuell ausgewählten Wert zu erhalten:

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

So rufen Sie den aktuell ausgewählten Text ab:

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



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

Sollte das funktionieren, sehen Sie dieses Beispiel:

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




Probiere dieses jQuery aus,

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

oder dieses Javascript,

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

Wenn Sie auf den Wert und nicht auf den Text zugreifen müssen, verwenden Sie die Methode val() anstelle von text() .

Schauen Sie sich die folgenden Fiddle-Links an.

Demo1 | Demo2




Versuche dies

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



Ich weiß, dass dies ein schrecklich alter Beitrag ist, und ich sollte wahrscheinlich für diese erbärmliche Auferstehung ausgepeitscht werden, aber ich dachte, ich würde ein paar sehr hilfreiche kleine JS-Schnipsel teilen, die ich bei jeder Anwendung in meinem Arsenal verwende ...

Beim Tippen:

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

*.js Sie *.js werden, versuchen Sie, diese kleinen Cumpets zu Ihrer globalen *.js Datei *.js :

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

und schreib einfach soval("#selector"); oder sotext("#selector"); stattdessen! Holen Sie sich noch schicker, indem Sie die beiden kombinieren und ein Objekt zurückgeben, das sowohl den value als auch den text !

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

Es spart mir eine Menge wertvolle Zeit, besonders bei formintensiven Anwendungen!




Noch ein weiteres getestetes Beispiel:

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



das wird den Trick machen

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



Dies alarmiert den ausgewählten Wert. JQuery-Code ...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

HTML Quelltext...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>



Haben Sie Ihr select-Element mit einer ID versehen?

<select id='dropDownId'> ...

Ihre erste Aussage sollte funktionieren!




Probier das aus, es bekommt den Wert:

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




Ihre erste Aussage sollte funktionieren !!

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

Es wird der Wert des aktuell ausgewählten Elements zurückgegeben.




Die id , die für Ihr Dropdown-Steuerelement im html Code generiert wurde, ist dynamisch. Verwenden Sie also die vollständige ID $('ct100_<Your control id>').val(). Es wird klappen.




Oder wenn du es versuchen würdest:

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

Ich habe es heute benutzt und es funktioniert gut.




benutzen

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

Das sollte funktionieren :)




Um den JQuery-Wert aus der Dropdown-Liste zu erhalten, verwenden Sie einfach die folgende Funktion und senden den ausgewählten Wert:

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



Ich weiß, dass das alt ist, aber ich habe dies mit einer aktuelleren Antwort aktualisiert.

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

ich hoffe das hilft




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



Verwenden Sie einen dieser Codes

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

ODER

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



Das ist was funktioniert

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



Für ausgewählte Texte verwenden Sie:

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

Für ausgewählte Werte verwenden Sie:

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



Sie können einen der folgenden verwenden:

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

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

            //OR

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

});



Benutze das einfach

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



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

Oder

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

Die obigen Codes funktionierten gut für mich




Sie müssen so setzen.

$('[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>



Versuche dies:

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

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