Ausgewählten Wert eines Dropdown-Elements mit jQuery abrufen

Question

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

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

y

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

aber beide geben eine leere Zeichenkette zurück.

Answer 1

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

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

Um den aktuell ausgewählten Text zu erhalten:

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

Answer 2

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

Answer 3

Probieren Sie dieses 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, versuchen Sie es mit val() Methode anstelle von text() .

Schauen Sie sich die untenstehenden Links an.

Demo1 | Demo2

Answer 4

Versuchen Sie dies

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

Answer 5

Ich weiß, dies ist ein schrecklich alten Beitrag und ich sollte wahrscheinlich für diese klägliche Wiederauferstehung gepeitscht werden, aber ich dachte, ich würde ein paar sehr hilfreiche kleine JS-Snippets teilen, die ich in jeder Anwendung in meinem Arsenal verwenden ...

Wenn Sie es abtippen:

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

alt wird, versuchen Sie, diese kleinen Kekse in Ihr globales Angebot aufzunehmen. *.js Datei:

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

und schreiben Sie einfach soval("#selector"); o sotext("#selector"); stattdessen! Noch raffinierter wird es, wenn Sie die beiden kombinieren und ein Objekt zurückgeben, das sowohl die value und die text !

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

Das spart mir eine Menge kostbarer Zeit, vor allem bei formlastigen Bewerbungen!