Як за допомогою 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

imo це навіть не повинно працювати; вибраний стан опції слід викликати, замість цього змінивши стан самого вибору :)

— Ja͢ck

1

selectElement.selectedIndex = index;це те, що означає Джек.

— роман

@rlemon, я розумію, але selectedIndexне можна використовувати для багаторазового вибору, коли multipleвикористовується атрибут. І нормальним ( html ) способом встановлення вибраних елементів є selectedатрибут optionелементів.

— Габріеле Петріолі

@ GabyakaG.Petrioli Нормальний спосіб - це фактично встановити selectedвластивість кожного відповідного optionsелемента true(а необов'язково решта - falseявно). Кілька виборів насправді дуже неприємні :)

— Ja͢ck

6

@sunnyiitkgp onchangeподія ніколи не запускається при зміні значення програмно. Ви можете додати "А" .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;

— Ja͢ck
джерело

7

Це має бути прийнята відповідь ... Це виглядає як найбезпечніше і найчистіше рішення ...

— Denys Séguret

1

Проблема полягає в тому, що він не викликає події "onchange".

— Гай Корланд

2

@GuyKorland Це трапляється і з жодною з інших відповідей, продемонстрованою тут ; якщо ви хочете, щоб подія стартувала, ви повинні це зробити вручну.

— Ja͢ck

1

@Jack Чи існує короткий шлях? Єдиний спосіб я знайшов: var fireEvent = функція (selectElement) {if (selectElement) {if ("fireEvent" у selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("змінити", помилково, істинно); selectElement.dispatchEvent (evt); }}}

— Гай Корланд

4

@GuyKorland jQuery викриває .trigger()це, але оскільки ви вже робите це з кодом, було б легко також зателефонувати обробникам змін.

— Ja͢ck

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
джерело

$ ('select'). val (значення); Чому такий серйозний? ;)

— Зеешан

1

@Zee Відповідний код також дозволяє кілька варіантів.

— 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

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

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

— Лі Д
джерело

"Індекс на основі 1" краще під час маніпулювання речами з датами. Врятує мене від безлічі неприємностей. Дякую.

— TCB13

3

З елементом '' ми зазвичай використовуємо атрибут 'value'. Тут буде простіше встановити:

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

— Савараткар
джерело

3

Спробуйте це:

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

З повагою!

— Ніколя Фінеллі
джерело

2

відповідь з ідентифікатором:

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

— Джавад Масумі
джерело

1

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

Одне застереження тут - якщо у вас є перегляд JavaScript для події зміни вибору / опції, яку вам потрібно додати, .trigger('change')щоб код став.

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

тому що лише дзвінок .attr('selected', 'selected')не викликає події

— kanitw
джерело