Как использовать jQuery, чтобы выбрать опцию выпадающего?


157

Мне было интересно, можно ли заставить jQuery выбрать <option>, скажем, 4-й элемент в выпадающем списке?

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

Я хочу, чтобы пользователь щелкнул ссылку, а затем <select>изменил ее значение, как если бы пользователь выбрал его, щелкнув по <option>.


4
ваши варианты имеют значение?
Виктор

Ответы:


184

Как насчет

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

пример на http://www.jsfiddle.net/gaby/CWvwn/


для современных версий jquery вы должны использовать .prop()вместо.attr()

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

пример на http://jsfiddle.net/gaby/CWvwn/1763/


3
Им это не должно даже работать; выбранное состояние опции должно быть вызвано изменением состояния самого выбора вместо этого :)
Ja͢ck

1
selectElement.selectedIndex = index;это то, что имеет в виду Джек
rlemon

@ rlemon, я понимаю, но selectedIndexнельзя использовать для множественного выбора, когда multipleиспользуется атрибут. И обычный ( html ) способ установки выбранных элементов - это selectedатрибут optionэлементов.
Габриэле Петриоли

@ GabyakaG.Petrioli Обычный способ - установить selectedсвойство каждого соответствующего optionsэлемента true(и, необязательно, falseявно - остальное ). Несколько вариантов выбора довольно неприятные на самом деле :)
Ja͢ck

6
@sunnyiitkgp onchangeсобытие никогда не запускается, когда значение изменяется программно. Вы можете добавить a .trigger('change')в конце, чтобы также запустить событие ( хотя оно будет
запускаться


54

Элементы выбора HTML имеют selectedIndexсвойство, в которое можно записать, чтобы выбрать конкретный параметр:

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

Используя простой JavaScript, этого можно достичь:

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

7
Это должен быть принятый ответ ... Похоже, самое разумное и чистое решение ...
Денис Сегюре

1
Проблема в том, что он не запускает событие onchange.
Гай Корланд

2
@GuyKorland Это происходит также и с другими ответами, продемонстрированными здесь ; если вы хотите, чтобы событие сработало, вы должны сделать это вручную.
Яцк

1
@ Джек Есть ли короткий путь? Единственный способ, который я нашел: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" в selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent («изменить», false, true); selectElement.dispatchEvent (EVT); }}}
Гай Корланд

4
@GuyKorland jQuery раскрывает .trigger()это, но так как вы уже делаете это с кодом, было бы легко также вызывать обработчики изменений самостоятельно.
Яцк


24

если ваши параметры имеют значение, вы можете сделать это:

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

'select' будет идентификатором вашего выбора или селектора класса. или, если есть только один выбор, вы можете использовать тег, как в примере.


2
Это именно то, что мне было нужно. Спасибо.
chapman84

23

Самый простой способ - это val(value)функция:

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

И чтобы получить выбранное значение вы не приводите аргументов:

$('select').val();

Кроме того, вы, если у вас есть <option value="valueToSelect">...</option>, вы можете сделать:

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

DEMO


Также работает $ ('# SelectCtrlId'). Val ('ValueToSelect');
Сай

9

Используйте следующий код, если вы хотите выбрать опцию с определенным значением:

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

$ ( 'выберите') вал (значение). Почему ты такой серьезный? ;)
Зеешан

1
@Zee Ответ код также позволяет несколько вариантов выбора.
Азганви

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

Я предпочитаю nth-child (), а не eq (), поскольку он использует индексирование на основе 1, а не 0, что немного проще для моего мозга.

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

«Индекс на основе 1» лучше при манипулировании вещами с датами. Спасает меня от многих неприятностей. Спасибо.
TCB13

3

С элементом «» мы обычно используем атрибут «значение». Это облегчит установку:

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



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

Одно предостережение: если у вас есть javascript, отслеживающий событие изменения select / option, которое нужно добавить, .trigger('change')чтобы код стал.

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

потому что только вызов .attr('selected', 'selected')не вызывает событие

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.