jQuery, aby pobrać i ustawić wartość wybranej opcji elementu HTML select

126

Próbuję pobrać i ustawić wybraną wartość wybranego elementu (lista rozwijana) z jQuery.

dla pobierania próbowałem $("#myId").find(':selected').val(), $("#myId").val()ale oba zwracają undefined.

Każdy wgląd w ten problem byłby bardzo mile widziany.

ErnieStings
źródło
jeśli używasz asp .net, ich identyfikator może nie być taki sam po wyrenderowaniu!
Rigobert Song

Odpowiedzi:

154

Sposób, w jaki to masz, jest w tej chwili poprawny. Albo identyfikator elementu select nie jest tym, co mówisz, albo masz problemy z domeną dom.

Sprawdź identyfikator elementu, a także sprawdź poprawność znaczników tutaj, w W3c.

Bez prawidłowego dom jQuery nie może działać poprawnie z selektorami.

Jeśli identyfikatory są prawidłowe, a Twoja domena jest poprawna, obowiązują następujące zasady:

Odczytać Wybierz wartość opcji

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

Aby ustawić Wybierz wartość opcji

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

Aby przeczytać wybrany tekst

$('#selectId>option:selected').text();
plac Czerwony
źródło
@ Html.DropDownList ("CoinTypes", (SelectList) ViewBag.RequiredLevel, new {@class = "form-control", @ style = "height: 21px; margin-top: 5px;"}) ale $ ('# CoinTypes ') .val (@ ViewBag.CoinType); nie wybiera
Nithin Paul
@NithinPaul nie komentuj, zadaj pytanie, które pokazuje HTML, aby ktoś mógł faktycznie spróbować i dowiedzieć się, co jest nie tak. Nie jestem pewien, jak można oczekiwać, że ktokolwiek to rozwiąże na podstawie niektórych formularzy internetowych / kodu MVC!
redsquare
248

aby pobrać / ustawić rzeczywistą właściwość selectedIndex elementu select, użyj:

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

$("#select-id").prop("selectedIndex",1);
pmko
źródło
19
Należy zauważyć, że funkcja prop () została zaimplementowana w wersji 1.6, więc poprzednie wersje nie mają tej funkcji.
RobB
18
Podoba mi się ta odpowiedź, ponieważ w rzeczywistości odpowiada ona na pytanie o dostęp do indeksu, a nie tylko o wartość.
Pablo Diaz
4
tak. Myślałem, że to było oryginalne pytanie.
Jack Holt
Prawdopodobnie mógłbyś również użyć attr z tą samą składnią i być w porządku.
Yitzhak
7
@ M.YitzhakSamuel .attr()i .prop()nie są synonimami. Będzie działać w niektórych przypadkach, gdy atrybut jest również właściwością, np. .attr('id')Jest równy .prop('id'). W tym przypadku .prop('selectedIndex')jest równa .get(0).selectedIndex.
WynandB
7

$('#myId').val() powinienem to zrobić, w przeciwnym razie spróbuję:

$('#myId option:selected').val()
karim79
źródło
4

Podczas ustawiania JQMnie zapomnij zaktualizować UI:

$('#selectId').val('newValue').selectmenu('refresh', true);
Jasper Giscombe
źródło
Dzięki za ten samorodek - zastanawiałem się, dlaczego nowa wartość nie pojawia się na ekranie po zmianie selectedIndex na $ ("# slot-choice"). Prop ("selectedIndex", n).
Samik R
3

$("#myId").val()powinno działać, jeśli myidjest to identyfikator elementu wyboru!

To ustawiłoby wybrany element: $("#myId").val('VALUE');

Rigobert Song
źródło
1

Załóżmy, że utworzyłeś listę rozwijaną za pomocą tagu SELECT, jak poniżej,

<select id="Country">

Teraz, jeśli chcesz zobaczyć, jaka jest wybrana wartość z listy rozwijanej za pomocą JQuery, po prostu umieść następujący wiersz, aby pobrać tę wartość.

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

będzie działać dobrze.

JaySing
źródło
0

Wiem, że to jest stare, ale właśnie spędziłem trochę czasu z Razorem, nie mogłem go zmusić do pracy, bez względu na to, jak bardzo się starałem. Wracane jako „niezdefiniowane” bez względu na to, czy użyłem „tekstu” czy „html” jako atrybutu. Na koniec dodałem atrybut „data-value” do opcji i odczytałem to dobrze.

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

 var DisplayText = $(this).find("option:selected").attr("data-value");
Darkloki
źródło
0

$ ("opcja #myId: wybrana") .text (); poda tekst, który wybrałeś w rozwijanym elemencie. tak czy inaczej możesz to zmienić na .val (); aby uzyskać jego wartość. sprawdź poniższe kodowanie

<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
źródło
-1

Spróbuj tego

$('#your_select_element_id').val('your_value').attr().add('selected');
Syed Nazir Hussain
źródło