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

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