Есть несколько способов сделать это, но самый чистый подход был потерян среди топовых ответов и множества аргументов за val(). Также некоторые методы изменились с jQuery 1.6, поэтому это требует обновления.
В следующих примерах я предполагаю, что переменная $select является объектом jQuery, указывающим на желаемый тег <select>, например, через следующее:
var $select = $('.selDiv .opts');
Примечание 1 - используйте val () для совпадений значений:
Для сопоставления значений использование val() намного проще, чем использование селектора атрибута: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
Установочная версия .val() реализована для тегов select путем установки свойства selected соответствующего option с тем же value, поэтому прекрасно работает во всех современных браузерах.
Примечание 2 - использовать prop ('selected', true):
Если вы хотите установить выбранное состояние опции напрямую, вы можете использовать prop (не attr) с параметром boolean (вместо текстового значения selected):
например. https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
Примечание 3 - допускаются неизвестные значения:
Если вы используете val() для выбора <option>, но значение val не совпадает (может произойти в зависимости от источника значений), тогда выбирается «ничего» и $select.val() вернет null.
Итак, для показанного примера и ради надежности вы можете использовать что-то вроде этого https://jsfiddle.net/1250Ldqn/:
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
Примечание 4 - точное совпадение текста:
Если вы хотите сопоставить по точному тексту, вы можете использовать filter с функцией. например https://jsfiddle.net/yz7tu49b/2/:
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
хотя, если у вас могут быть лишние пробелы, вы можете добавить обрезку к чеку, как в
return $.trim(this.text) == "some value to match";
Примечание 5 - совпадение по индексу
Если вы хотите сопоставить по индексу, просто проиндексируйте дочерние элементы, например, например. https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Хотя в настоящее время я склоняюсь к тому, чтобы избегать прямых свойств DOM в пользу jQuery, к коду, ориентированному на будущее, так что это также можно сделать как https://jsfiddle.net/yz7tu49b/5/:
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Примечание 6 - используйте change () для запуска нового выбора
Во всех вышеперечисленных случаях событие изменения не срабатывает. Это сделано для того, чтобы вы не сталкивались с событиями рекурсивных изменений.
Чтобы сгенерировать событие изменения, если необходимо, просто добавьте вызов к .change() объекту jQuery select. например самый первый самый простой пример становится https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
Существует также множество других способов поиска элементов с помощью селекторов атрибутов, например [value="SEL2"], но вы должны помнить, что селекторы атрибутов относительно медленны по сравнению со всеми этими другими опциями.