Ruft den ausgewählten Wert eines Dropdown-Elements mit jQuery ab

443

Wie kann ich mit jQuery den ausgewählten Wert eines Dropdown-Felds abrufen?
Ich habe es versucht

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

und

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

aber beide geben eine leere Zeichenfolge zurück.

jquery Shyam
quelle

3

Beides sollte funktionieren. Das Problem muss woanders sein (zB ist dieser Code in einen $(document).ready(...Block eingeschlossen?)

karim79

4

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

Ameise

2

Nein - $('#dropDownId').val();ist der präziseste Weg, um den ausgewählten Wert zu erhalten.

Karim79

1

@shyam Sie müssen in dieser Anweisung nicht auswählen, da IDs für das Dokument eindeutig sind. Sie sollten den Tag-Namen nur verwenden, wenn Sie sich auf Klassen beziehen select#dropDownId option:selected.

Ameise

Mögliches Duplikat von Wie bekomme ich den Index von select-> option tag

Chris Moschini

840

So erhalten Sie für einzelne Select-Dom-Elemente den aktuell ausgewählten Wert:

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

So erhalten Sie den aktuell ausgewählten Text:

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

Peter McG
quelle

11

Sie brauchen vorher ein Leerzeichen :selected.

Zwischenzeit

53

Der schnellste Weg, um den Text der ausgewählten Option zu erhalten, ist:$("#dropDownId").children("option").filter(":selected").text()

RickardN

3

Ich wünschte, Sie hätten Verweise auf .val()und.text()

shareef

8

Richard, dein Code ist zu lang ... er kann für die Lesbarkeit viel prägnanter sein

PositiveGuy

2

@ JamesM.Lay eine DOM-Referenz in einer Variablen gespeichert? Dann benutzen SiejQuery(domVariable).val()

Allen Linatoc

57

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

Sollte gut funktionieren, siehe 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!" />

Erweitern Sie das Snippet

Nick Reeve
quelle

4

"Wert" ist das, was die meisten Programmierer vermissen, während das Deklarieren von Elementen und Abfragen stattdessen weiterhin Text zurückgibt

Asad

Überprüfen Sie die Demo hier freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

Code Spy

22

Versuchen Sie diese jQuery,

$("#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, val()verwenden Sie stattdessen die Methode text().

Schauen Sie sich die folgenden Geigen-Links an.

Demo1 | Demo2

Glück
quelle

14

Versuche dies

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

Kvadiyatar
quelle

OP fragt nach dem ausgewählten Wert. Diese Antwort würde den Textinhalt der Dropdown-Liste erhalten. Nicht falsch, nur nicht das, wonach er gefragt hatte.

Joshua Dance

12

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

Beim Tippen:

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

wird alt, versuchen Sie, diese kleinen Fladen zu Ihrer globalen *.jsDatei hinzuzufügen :

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

und einfach schreiben soval("#selector");oder sotext("#selector");stattdessen! Werden Sie noch schicker, indem Sie beide kombinieren und ein Objekt zurückgeben, das sowohl das valueals auch das enthält text!

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

Das spart mir eine Menge wertvoller Zeit, insbesondere bei formlastigen Anwendungen!

DevlshOne
quelle

9

Dadurch wird der ausgewählte Wert benachrichtigt. 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>

Uthaiah
quelle

8

das wird den Trick machen

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

Singleton
quelle

8

Noch ein 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>

J Slick
quelle

4

Versuchen Sie dies, es erhält den Wert:

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

Engelo Rigo
quelle

3

Haben Sie Ihr Auswahlelement mit einer ID versehen?

<select id='dropDownId'> ...

Ihre erste Aussage sollte funktionieren!

schaechtele
quelle

3

Für ausgewählten Text verwenden Sie:

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

Für den ausgewählten Wert verwenden Sie:

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

Mahi
quelle

2

Das id, was für Ihre Dropdown-Steuerung im generiert wurde html, ist dynamisch. Verwenden $('ct100_<Your control id>').val().Sie also die vollständige ID. Es wird funktionieren.

VenkeHV
quelle

2

Oder wenn Sie versuchen würden:

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

Ich habe es heute benutzt und es funktioniert gut.

Solide
quelle

2

verwenden

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

Das sollte funktionieren :)

Namila
quelle

2

Um den jquery-Wert aus der Dropdown-Liste zu erhalten, verwenden Sie einfach die unten gesendete Funktion idund erhalten 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;
}

Virendra Khade
quelle

Die mühsame Art, es zu tun, aber was auch immer funktioniert.

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>

Erweitern Sie das Snippet

Sakthi Sudhan
quelle

1

Ich weiß, dass dies alt ist, aber ich aktualisiere dies mit einer aktuelleren Antwort

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

ich hoffe das hilft

mindmyweb
quelle

1

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

Versuche dies

Rakesh
quelle

1

Verwenden Sie einen dieser Codes

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

ODER

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

Bipin
quelle

1

Das funktioniert

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

Shittu Joseph Olugbenga
quelle

1

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

Oder

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

Die obigen Codes haben bei mir gut funktioniert

Stefan Kelchtermans
quelle

1

Sie können dies tun, indem Sie den folgenden Code verwenden.

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

Wenn Sie den ausgewählten Wert aus den Optionen der Auswahlliste abrufen möchten. Dies wird den Trick machen.

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

Dulith De Costa
quelle

0

Sie können Folgendes verwenden:

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

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

            //OR

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

});

Suresh Burdak
quelle

0

Sie müssen so setzen.

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

Arthur Salgado
quelle

0

Versuche dies:

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

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

saravanajd
quelle

0

Verwenden Sie die folgende Methode, um den ausgewählten Wert beim Laden der Seite abzurufen:

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

UTHIRASAMIE
quelle

0

Wenn Sie mehr als eine Dropdown-Liste haben, versuchen Sie:

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
quelle

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
quelle

Bitte geben Sie eine Erklärung an, wie und warum dies das Problem löst. Dies würde wirklich dazu beitragen, die Qualität Ihres Beitrags zu verbessern und wahrscheinlich zu mehr Up-Votes zu führen.

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
quelle

-1

Das sollte für Sie funktionieren

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

mohamed ruzaik
quelle

Was ist, wenn Ihre Dropdown-Option als programmgesteuert ausgewählt wurde (z. B. aus einer Ajax-Anforderung, die ein Dropdown-Menü ausfüllt)? Wenn Sie versuchen, eine .val () zu erhalten, erhalten Sie null für den Wert (obwohl das Überprüfen der Quelle zeigt, dass die Option tatsächlich ausgewählt ist)! $ ("myDD-Option: ausgewählt"). val () ergibt undefiniert.

MC9000

Ruft den ausgewählten Wert eines Dropdown-Elements mit jQuery ab

Antworten: