Jak używać jQuery, aby wybrać opcję rozwijaną?


157

Zastanawiałem się, czy jest możliwe, aby jQuery wybrał <option>, powiedzmy, czwarty element w rozwijanym polu?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Chcę, aby użytkownik kliknął łącze, a następnie <select>zmieniło wartość pola, tak jakby użytkownik wybrał je, klikając <option>.


4
czy twoje opcje mają wartość?
Victor

Odpowiedzi:


184

Co powiesz na

$('select>option:eq(3)').attr('selected', true);

przykład pod adresem http://www.jsfiddle.net/gaby/CWvwn/


w nowoczesnych wersjach jquery należy używać .prop()zamiast.attr()

$('select>option:eq(3)').prop('selected', true);

przykład pod adresem http://jsfiddle.net/gaby/CWvwn/1763/


3
imo to nawet nie powinno działać; wybrany stan opcji powinien być wyzwalany poprzez zmianę stanu samej selekcji :)
Ja͢ck

1
selectElement.selectedIndex = index;to właśnie Jack ma na myśli.
rlemon

@rlemon, rozumiem, ale selectedIndexnie można go używać do wielokrotnego wyboru, gdy multipleużywany jest atrybut. A normalnym ( html ) sposobem ustawiania wybranych elementów jest selectedatrybut optionelementów.
Gabriele Petrioli

@ GabyakaG.Petrioli Normalnym sposobem jest w rzeczywistości ustawienie selectedwłaściwości każdego odpowiedniego optionselementu na true(i opcjonalnie pozostałych falsejawnie). Wielokrotne wybory są w rzeczywistości dość nieprzyjemne :)
Ja͢ck

6
@sunnyiitkgp onchangezdarzenie nigdy nie jest wyzwalane, gdy wartość zostanie zmieniona programowo. Można dodać .trigger('change')na końcu również ognia zdarzenie ( choć będzie to ogień niezależnie od wartości które faktycznie zmieniło )
Gabriele Petrioli


54

Elementy wyboru HTML mają selectedIndexwłaściwość, do której można zapisać w celu wybrania określonej opcji:

$('select').prop('selectedIndex', 3); // select 4th option

Używając zwykłego JavaScript można to osiągnąć przez:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

7
To powinna być akceptowana odpowiedź ... Wygląda na najbardziej rozsądne i najczystsze rozwiązanie ...
Denys Séguret

1
Problem polega na tym, że nie uruchamia zdarzenia „onchange”.
Guy Korland

2
@GuyKorland Dzieje się tak również z żadną inną odpowiedzią, pokazaną tutaj ; jeśli chcesz, aby zdarzenie zostało uruchomione, musisz to zrobić ręcznie.
Ja͢ck

1
@Jack Czy jest krótka droga? Jedyny sposób, w jaki znalazłem: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" w selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("zmiana", fałsz, prawda); selectElement.dispatchEvent (evt); }}}
Guy Korland

4
@GuyKorland jQuery ujawnia .trigger()to, ale ponieważ robisz to już z kodem, łatwo byłoby również samodzielnie wywołać procedury obsługi zmian.
Ja͢ck

30

Zrobiłbym to w ten sposób

 $("#idElement").val('optionValue').trigger('change');

3
to powinna być wybrana odpowiedź
Uzumaki Naruto

2
$ ("# idElement"). val ('optionValue'). change () również może działać
Ullullu

24

jeśli twoje opcje mają wartość, możesz to zrobić:

$('select').val("the-value-of-the-option-you-want-to-select");

„select” byłby identyfikatorem wybranego elementu lub selektora klasy. lub jeśli jest tylko jeden wybór, możesz użyć tagu tak, jak w przykładzie.


2
Właśnie tego potrzebowałem. Dzięki.
chapman84

23

Najprostszym sposobem jest val(value)funkcja:

$('select').val(2);

Aby otrzymać wybraną wartość, nie podajesz żadnych argumentów:

$('select').val();

Jeśli tak <option value="valueToSelect">...</option>, możesz:

$('select').val("valueToSelect");

PRÓBNY


Pracował również $ ('# SelectCtrlId'). Val ('ValueToSelect');
Sai

9

Użyj poniższego kodu, jeśli chcesz wybrać opcję o określonej wartości:

$('select>option[value="' + value + '"]').prop('selected', true);

$ ('select'). val (wartość); Dlaczego tak poważnie? ;)
Zeeshan

1
@Zee Odpowiedni kod pozwala również na wiele wyborów.
Azghanvi

5
 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

3

Wolę nth-child () od eq (), ponieważ używa indeksowania opartego na 1 zamiast na 0, co jest nieco łatwiejsze dla mojego mózgu.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

Indeks oparty na 1 jest lepszy przy operowaniu na datach. Ratuje mnie od wielu kłopotów. dzięki.
TCB13

3

W przypadku elementu „” zwykle używamy atrybutu „wartość”. Ułatwi to wtedy ustawienie:

$('select').val('option-value');



1
 $('select>option:eq(3)').attr('selected', 'selected');

Jedynym zastrzeżeniem jest to, że jeśli masz obserwację javascript dla zdarzenia zmiany select / option, musisz dodać, .trigger('change')aby kod stał się.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

ponieważ tylko wywołanie .attr('selected', 'selected')nie wyzwala zdarzenia

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.