Ustaw wybrany indeks listy rozwijanej za pomocą jQuery

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).

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);

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);

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();

używam

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

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

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>

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

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

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');

$("[id$='" + originalId + "']").val("0 index value");

ustawi go na 0

Wybierz czwartą opcję

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

przykład na jsfiddle