Как выбрать конкретную опцию в элементе SELECT в jQuery?

718

Если вы знаете индекс, значение или текст. также, если у вас нет идентификатора для прямой ссылки.

Это , это и это все полезные ответы.

Пример разметки

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>
Джей Корбетт
источник
46
$("#my_select").val("the_new_value").change();... ... от так
dsdsdsdsd

Ответы:

1206

Селектор для получения среднего параметра-элемента по значению

$('.selDiv option[value="SEL1"]')

Для индекса:

$('.selDiv option:eq(1)')

Для известного текста:

$('.selDiv option:contains("Selection 1")')

РЕДАКТИРОВАТЬ : Как отмечено выше, OP может быть после изменения выбранного элемента в раскрывающемся списке. В версии 1.6 и выше рекомендуется метод prop ():

$('.selDiv option:eq(1)').prop('selected', true)

В старых версиях:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : после комментария Райана. Совпадение по «выбору 10» может быть нежелательным. Я не нашел селектора, соответствующего полному тексту, но фильтр работает:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

РЕДАКТИРОВАТЬ 3 : Будьте осторожны с, так $(e).text()как он может содержать новую строку, что делает сравнение неудачным. Это происходит, когда параметры неявно закрыты (без </option>тега):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

Если вы просто используете e.textлишние пробелы, такие как завершающий символ новой строки, будут удалены, что сделает сравнение более надежным.

Grastveit
источник
8
: содержит не очень хорошо, так как он будет соответствовать фрагментам текста; проблематично, если какой-либо текст вашего параметра является подстрокой другого текста параметра.
Райан
26
Это тоже работает $ ('# id option [value = "0"]'). Attr ('selected', 'selected');
DevC
@ Grastveit, как изменить цвет первого варианта, если он выбран или нет, когда у него есть класс, скажем, myClass. Спасибо
Закер,
@ Пользователь, я не понимаю. Может опубликовать это в новом вопросе? Или это $ ('. SelDiv .myClass'). Css ('color', 'red')?
Grastveit
6
Я хотел бы добавить, что вы должны ОПРЕДЕЛЕННО использовать prop, а не attr. Я чуть не сошел с ума, пытаясь отладить приложение и меняя его с attr на prop.
user609926
125

Ни один из вышеперечисленных методов не обеспечил мне нужного решения, поэтому я решил, что я предоставлю то, что сработало для меня.

$('#element option[value="no"]').attr("selected", "selected");
user1074546
источник
10
Обратите внимание, что с jQuery 1.6 это следует использовать, propа не использовать attr.
Ушел кодирование
@GoneCoding Использование .attrправильно. «selected» - это атрибут <option> w3.org/TR/html5/forms.html#attr-option-selected
Карлос Ллонго
3
@CarlosLlongo: Это не имеет значения. Рекомендация JQuery всегда использовать propв предпочтении attr. Это избавляет от необходимости искать каждое свойство на w3.org, чтобы увидеть, является ли оно атрибутом или реализовано с помощью вспомогательных действий.
Ушел кодирование
82

Вы можете просто использовать val()метод:

$('select').val('the_value');
Леандро Ардиссоне
источник
20
Это неправильно, потому что вы УСТАНАВЛИВАЕТЕ значение ВСЕХ элементов SELECT на the_value. .val не является функцией селектора / фильтра! Это средство доступа к свойству, и передача ему этой строки Устанавливает значение. Я попытался забрать свой голос обратно, но было слишком поздно после того, как я понял это в тестировании.
AaronLS
4
Горячий у вас есть 10 голосов в качестве полезного ответа? Val () является геттером и сеттером. Если вы просто используете val (), вы получите значение. Если вы передаете что-то вроде val ('the_value'), вы устанавливаете его как 'the_value'
Gui
12
Пожалуйста, @AaronLS и @guilhermeGeek, обратитесь к документации (последний пример). Он работает как селектор для выбора, флажки и переключатели, а также как установщик значения для ввода текста и текстовых областей.
Леандро Ардиссоне
9
Вы неправильно прочитали документацию. Для флажков, радио и списков команда устанавливает атрибут "selected" для этих элементов. Последний пример показывает, как передача val («checkbox 1») делает его выбранным. Это не то же самое, что «селектор» с точки зрения получения объектов с помощью селектора CSS / jquery. Я проверил ваш код, он не работает в нижней строке.
AaronLS
27
+1: нет, это не селектор JQuery, однако я думаю, что большинство людей, которые ищут этот вопрос, похожи на меня, и просто хотят изменить выбранную в данный момент опцию; придумать фактический селектор - просто способ сделать это. И это, безусловно, лучше, чем ответы, которые я видел, когда вы перебираете все варианты.
kdgregory
57

По значению, то, что работало для меня с jQuery 1.7, было кодом ниже, попробуйте это:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
mpoletto
источник
5
Я не уверен, что вам нужен метод .change ().
Филипп Сенн
6
Это .change()было необходимо. У меня был пример, где я переключал миниатюры на основе SELECT. Когда я загружал пользовательскую тему, она должна была выбрать «Пользовательскую тему» ​​из списка параметров. .prop()Вызов работал, но без .change(), миниатюрное изображение на правом мой выбор никогда не обновляется.
Volomike
2
.change () был лучшим советом. +1
Ja8zyjits
1
Примечание: логическое propзначение генерирует тот же результат. напр..prop('selected', true)
пропал
Зависит от того, что некоторым браузерам - возможно, старым браузерам - нужна строка 'selected'. Я думаю, что большинство из них поддерживают текстовую строку.
Мполетто
16

Есть несколько способов сделать это, но самый чистый подход был потерян среди лучших ответов и множества аргументов по 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()к selectобъекту jQuery . например, самый первый самый простой пример - https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

Есть также много других способов найти элементы с помощью селекторов атрибутов, например [value="SEL2"], но вы должны помнить, что селекторы атрибутов относительно медленны по сравнению со всеми этими другими опциями.

Ушел кодирование
источник
13

Вы можете назвать выбор и использовать это:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

Следует выбрать вариант, который вы хотите.

Sandro
источник
12
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");
Жоау Паулу Оливейра
источник
Спасибо за ваш пост, но что этот ответ добавляет к разговору, который не включен в принятые ответы?
Эдвард
если выбранная опция уже выбрана, то произойдет сбой, поскольку в раскрывающемся списке не может быть выбрано более одного элемента, если он не является множественным выбором. Вам нужно сделать .prop ('selected', true)
derekcohen
9

Отвечая на мой собственный вопрос для документации. Я уверен, что есть другие способы сделать это, но это работает, и этот код проверен.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>
Джей Корбетт
источник
9

Именно это будет работать, попробуйте следующие методы

Для нормального выбора

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

Для выбора 2 варианта триггера необходимо использовать опцию

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>
Перумал N
источник
8

Используя jquery-2.1.4 , я нашел следующий ответ для меня:

$('#MySelectionBox').val(123).change();

Если у вас есть строковое значение, попробуйте следующее:

$('#MySelectionBox').val("extra thing").change();

Другие примеры не помогли мне, поэтому я добавляю этот ответ.

Я нашел оригинальный ответ по адресу: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

raddevus
источник
8

Для настройки выберите значение с выбранным триггером:

$('select.opts').val('SEL1').change();

Для настройки опции из области:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

Этот код использует селектор, чтобы выяснить объект выбора с условием, а затем изменить выбранный атрибут с помощью attr().


Кроме того, я рекомендую добавить change()событие после установки атрибута selected, при этом код будет близок к изменению выбора пользователем.

Ник Цай
источник
6

Я использую это, когда я знаю индекс списка.

$("#yourlist :nth(1)").prop("selected","selected").change();

Это позволяет изменить список и инициировать событие изменения. ": Nth (n)" отсчитывает от индекса 0

Miguel
источник
5

я пойду с: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
user2606817
источник
5

Попробуй это

вы просто используете идентификатор поля выбора вместо #id (т.е. # select_name)

вместо значения параметра используйте значение параметра выбора

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>
Перумал N
источник
3

Для Jquery выбрано, если вы отправляете атрибут в функцию и нужно обновить опцию выбора

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
Андрей Гаспар
источник
3
/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>
Пратик Камани
источник
1

$('select').val('the_value');Выглядит правильное решение , и если у вас есть таблицы данных строк , то:

$row.find('#component').val('All');
Джитеш Соджитра
источник
1

если вы не хотите использовать jQuery, вы можете использовать следующий код:

document.getElementById("mySelect").selectedIndex = "2";
FLICKER
источник
1

Спасибо за вопрос. Надеюсь, этот кусок кода будет работать для вас.

var val = $("select.opts:visible option:selected ").val();
Доктор Рассел Хуссейн
источник
0
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

или

$('#select option[value="myValue"]').prop("selected",true).trigger("change");
Тони Дюран
источник
Пожалуйста, измените свой ответ, чтобы код был отформатирован как код. Сделайте это с помощью панели инструментов или просто сделайте отступ всех строк каждого блока кода на четыре пробела.
Беруик