jQuery zum Abrufen und Festlegen des ausgewählten Optionswerts des HTML-Auswahlelements

126

Ich versuche, den ausgewählten Wert eines ausgewählten Elements (Dropdown-Liste) mit jQuery abzurufen und festzulegen.

Zum Abrufen habe ich versucht $("#myId").find(':selected').val(), $("#myId").val()aber beide geben undefiniert zurück.

Jeder Einblick in dieses Problem wäre sehr dankbar.

jquery ErnieStings
quelle
Wenn Sie asp .net verwenden, ist die ID nach dem Rendern möglicherweise nicht mehr dieselbe!
Rigobert Song

Antworten:

154

Die Art und Weise, wie Sie es haben, ist im Moment richtig. Entweder ist die ID der Auswahl nicht das, was Sie sagen, oder Sie haben einige Probleme im Dom.

Überprüfen Sie die ID des Elements und überprüfen Sie auch Ihre Markup-Validierungen hier bei W3c.

Ohne einen gültigen dom kann jQuery nicht korrekt mit den Selektoren arbeiten.

Wenn die IDs korrekt sind und Ihr Dom validiert, gilt Folgendes:

Zum Lesen Optionswert auswählen

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

Einstellen Wählen Sie Optionswert

$('#selectId').val('newValue');

Ausgewählten Text lesen

$('#selectId>option:selected').text();
rotes Quadrat
quelle
@ Html.DropDownList ("CoinTypes", (SelectList) ViewBag.RequiredLevel, neu {@class = "form-control", @ style = "height: 21px; margin-top: 5px;"}) aber $ ('# CoinTypes ') .val (@ ViewBag.CoinType); wählt nicht
Nithin Paul
@NithinPaul nicht wirklich ein Kommentar, stellen Sie eine Frage, die HTML zeigt, damit jemand tatsächlich versuchen kann, herauszufinden, was falsch ist. Nicht sicher, wie Sie erwarten können, dass jemand es aus einigen Webforms / MVC-Code herausarbeitet!
Redsquare
248

Um die tatsächliche Eigenschaft selectedIndex des Auswahlelements abzurufen / festzulegen, verwenden Sie: 

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);
pmko
quelle
19
Es ist wichtig zu beachten, dass die Funktion prop () in Version 1.6 implementiert wurde, sodass frühere Versionen diese Funktionalität nicht haben.
RobB
18
Ich mag diese Antwort, weil sie tatsächlich die Frage des Zugriffs auf den Index beantwortet, nicht nur den Wert.
Pablo Diaz
4
ja. Ich dachte, das wäre die ursprüngliche Frage.
Jack Holt
Sie könnten wahrscheinlich auch attr mit der gleichen Syntax verwenden und in Ordnung sein.
Yitzhak
7
@ M.YitzhakSamuel .attr()und .prop()sind auch nicht. Es funktioniert in bestimmten Fällen, in denen ein Attribut auch eine Eigenschaft ist, z . B. .attr('id')gleich .prop('id'). In diesem Fall .prop('selectedIndex')ist gleich .get(0).selectedIndex.
WynandB
7

$('#myId').val() sollte es tun, andernfalls würde ich versuchen:

$('#myId option:selected').val()
karim79
quelle
4

JQMVergessen Sie beim Einstellen mit nicht, Folgendes zu aktualisieren UI:

$('#selectId').val('newValue').selectmenu('refresh', true);
Jasper Giscombe
quelle
Vielen Dank für dieses Nugget. Ich habe mich gefragt, warum der neue Wert nicht auf dem Bildschirm angezeigt wird, nachdem der selectedIndex mit $ ("# slot-choice"). Prop ("selectedIndex", n) geändert wurde.
Samik R
3

$("#myId").val()sollte funktionieren wenn myiddie select element id ist!

Dies würde das ausgewählte Element festlegen: $("#myId").val('VALUE');

Rigobert Song
quelle
1

Angenommen, Sie haben eine Dropdown-Liste mit dem SELECT-Tag wie folgt erstellt:

<select id="Country">

Wenn Sie nun mit JQuery sehen möchten, welcher Wert aus der Dropdown-Liste ausgewählt wurde, setzen Sie einfach die folgende Zeile, um diesen Wert abzurufen.

var result= $("#Country option:selected").text();

es wird gut funktionieren.

JaySing
quelle
0

Ich weiß, dass dies alt ist, aber ich hatte gerade eine Zeit mit Razor, konnte es nicht zum Laufen bringen, egal wie sehr ich es versuchte. Es wurde immer wieder als "undefiniert" angezeigt, unabhängig davon, ob ich "Text" oder "HTML" als Attribut verwendet habe. Schließlich habe ich der Option das Attribut "Datenwert" hinzugefügt und es hat das ganz gut gelesen.

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");
Darkloki
quelle
0

$ ("Option #myId: ausgewählt") .text (); gibt Ihnen den Text, den Sie im Dropdown-Element ausgewählt haben. In beiden Fällen können Sie es in .val () ändern. um den Wert davon zu bekommen. Überprüfen Sie die folgende Codierung

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>
Wikum W.
quelle
-1

Versuche dies

$('#your_select_element_id').val('your_value').attr().add('selected');
Syed Nazir Hussain
quelle