Как использовать 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')в конце, чтобы также запустить событие ( хотя оно будет

— запускаться

149

Решение:

$("#element-id").val('the value of the option');

— Гарольд Сота
источник

2

это не устанавливает selectedпараметр в HTML.

— Ахмад Хамза

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()это, но так как вы уже делаете это с кодом, было бы легко также вызывать обработчики изменений самостоятельно.

— Яцк

30

Я бы сделал это так

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

— Франциска
источник

3

это должен быть выбранный ответ

— Узумаки Наруто

2

$ ("# idElement"). val ('optionValue'). change () также может работать

— Ullullu

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

— nlareu
источник

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

— Зеешан

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

— Savaratkar
источник

3

Попробуй это:

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

С уважением!

— Николас Финелли
источник

2

ответ с идентификатором:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

— Джавад Масуми
источник

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')не вызывает событие

— kanitw
источник