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

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

Gabriele Petrioli
źródło
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
149

Rozwiązanie:

$("#element-id").val('the value of the option');
Harold Sota
źródło
2
nie ustawia selectedopcji w kodzie HTML.
Ahmad hamza
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;
Jacek
źródło
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');
franzisk
źródło
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.

Zwycięzca
źródło
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

Ionică Bizău
źródło
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);
nlareu
źródło
$ ('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);
Mamun Rasid
źródło
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);
Lee D.
źródło
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');
Savaratkar
źródło
3

Spróbuj tego:

$('#mySelectElement option')[0].selected = true;

Pozdrowienia!

Nicolas Finelli
źródło
2

odpowiedz z id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);
Javad Masoumi
źródło
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

kanitw
źródło