Ustaw wybrany indeks listy rozwijanej za pomocą jQuery

165

Jak ustawić indeks listy rozwijanej w jQuery, jeśli sposób znajdowania kontrolki jest następujący:

$("*[id$='" + originalId + "']")

Robię to w ten sposób, ponieważ tworzę formanty dynamicznie i ponieważ identyfikatory są zmieniane podczas korzystania z formularzy sieci Web, znalazłem to jako obejście, aby znaleźć mi niektóre kontrolki. Ale kiedy już mam obiekt jQuery, nie wiem, jak ustawić wybrany indeks na 0 (zero).

jquery oz.
źródło

Odpowiedzi:

352

Po pierwsze - ten selektor działa dość wolno. Skanuje każdy element DOM w poszukiwaniu identyfikatorów. Jeśli możesz przypisać klasę do elementu, będzie to mniejszy wpływ na wydajność.

$(".myselect")

Aby jednak odpowiedzieć na Twoje pytanie, istnieje kilka sposobów zmiany wartości wybranych elementów w jQuery

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);
gnarf
źródło
czy jest lepszy sposób na zrobienie tego? Pomyślałem, że zeskanuje cały DOM, szukając dopasowania do ID, ale ponieważ jestem nowy w jQuery, pomyślałem, zróbmy to, a potem zobaczmy, czy jest lepszy sposób na zrobienie tego. Każda rada będzie mile widziana.
oz.
Tak - jeśli możesz przypisać klasę elementowi (elementom), które chcesz znaleźć, byłby to znacznie szybszy selektor.
gnarf
@gnarf czy identyfikatory nie są szybsze?
KBN,
#an-idjest szybszy, ale *[id$=ends-with]jest o wiele wolniejszy, to właśnie oznacza "przypisz klasę do elementu"
gnarf
Co powiesz na to, że mam wiele DropDownList ASP.net z inną wybraną wartością indeksu?
SearchForKnowledge
106

Właśnie to znalazłem, działa dla mnie i osobiście uważam, że jest łatwiejszy do odczytania.

Spowoduje to ustawienie rzeczywistego indeksu, tak jak w przypadku opcji nr 3 odpowiedzi gnarfa.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Kiedyś to nie działało, ale teraz ... zobacz błąd: http://dev.jquery.com/ticket/1474

Uzupełnienie

Zgodnie z zaleceniami w komentarzach użyj:

$("select#elem").prop('selectedIndex', 0);

4imble
źródło
30
A od jQuery 1.6 powinieneś używać .prop('selectedIndex', 0);niezależnie od tego, czy .attr()działa, czy nie :)
Gnarf
1
Prawidłowo, w rzeczywistości może nie działać w wersji 1.7. zobacz zaakceptowaną odpowiedź: stackoverflow.com/questions/8010664/ ...
4imble.
+1 za dodatek. Mój stary kod został uszkodzony z powodu tego problemu
BiLaL
11

Piszę tę odpowiedź w 2015 roku iz jakiegoś powodu (prawdopodobnie starsze wersje jQuery) żadna z pozostałych odpowiedzi nie zadziałała. Chodzi mi o to, że zmieniają wybrany indeks, ale tak naprawdę nie odzwierciedla on rzeczywistego menu.

Oto inny sposób zmiany indeksu i odzwierciedlenia go w menu:

$('#mydropdown').val('first').change();
PaulG
źródło
1
Dziękuję za odpowiedź. Tylko ta odpowiedź działa dla mnie
Viraj Dhamal,
Również w 2015 roku nie mam problemu ze prop('selectedIndex', ...);zmianą zaznaczenia (testowane z Chrome i Firefox).
Lambart
2
Warto zauważyć, że tutaj robisz inaczej, wyzwalając changezdarzenie na liście rozwijanej, co może być również użyteczną poprawką / obejściem dla osób, które zmieniają wybór, dzwoniąc prop('selectedIndex', ...), a nie val(...). Być może problem polegał na tym, że nasłuchiwałeś changewydarzenia, a TO nie działało w Twoim przypadku? To prawda, że ​​zwykła zmiana property nie spowoduje wyzwolenia żadnych wydarzeń ...
Lambart
9

używam 

$('#elem').val('xyz');

aby wybrać element opcji, który ma wartość = 'xyz'

djowie
źródło
9

Kod JQuery:

$("#sel_status").prop('selectedIndex',1);

Kod JSP:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>
satya
źródło
3

Chcesz pobrać wartość pierwszej opcji w wybranym elemencie.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));
MacAnthony
źródło
3

Aby wybrać drugą opcję

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Tutaj dodajemy „wyzwalacz („ zmiana ”), aby zdarzenie było uruchamiane.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');
Jarrod
źródło
to jest o wiele lepsza odpowiedź.
Ben Dehghan
1 
$("[id$='" + originalId + "']").val("0 index value");

ustawi go na 0

Josh Mein
źródło
1

Wybierz czwartą opcję

$('#select').val($('#select option').eq(3).val());

przykład na jsfiddle

dabar
źródło
2
prawidłowe rozwiązanie ... do konkursu na zaciemnianie kodu! :)
Lambart