Как выбрать конкретный параметр в элементе SELECT в jQuery?

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

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

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

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

ОТВЕТЫ

Ответ 1

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

$('.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"})

EDIT3: Будьте осторожны с $(e).text() как он может содержать символ новой строки, что делает сравнение неудачным. Это происходит, когда параметры неявно закрыты (без </option>):

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

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

Ответ 2

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

$('#element option[value="no"]').attr("selected", "selected");

Ответ 3

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

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

Ответ 4

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

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

Ответ 5

Существует несколько способов сделать это, но самый чистый подход был потерян среди лучших ответов и нагрузок аргументов более val(). Также некоторые методы были изменены с помощью jQuery 1.6, поэтому для этого требуется обновление.

В следующих примерах я предполагаю, что переменная $select является объектом jQuery, указывающим на желаемый тег <select>, например. через следующее:

var $select = $('.selDiv .opts');

Примечание 1 - используйте значение val() для совпадения значений:

Для сопоставления значений использование val() намного проще, чем использование селектора атрибутов: https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

Версия setter .val() реализована в тегах select, установив свойство selected сопоставления option с тем же value, поэтому отлично работает во всех современных браузерах.

Примечание 2 - используйте prop ('selected', true):

Если вы хотите установить выбранное состояние параметра напрямую, вы можете использовать prop (not 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 - соответствие по индексу

Если вы хотите совместить по индексу, просто проиндексируйте дочерние элементы select, например. 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"], но вы должны помнить, что селекторы атрибутов относительно медленны по сравнению со всеми этими другими параметрами.

Ответ 6

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

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

Он должен выбрать нужный вариант.

Ответ 7

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

Ответ 8

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

<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

Используя 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

Ответ 10

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

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

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

Ответ 11

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

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

Для установки опции из области действия:

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

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

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

Ответ 12

я пойду с: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

Ответ 13

Попробуйте

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

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

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

Ответ 14

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

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

Ответ 15

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

Ответ 16

попробуй этот новый

Именно это будет работать

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

Ответ 17

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

$row.find('#component').val('All');

Ответ 18

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

document.getElementById("mySelect").selectedIndex = "2";

Ответ 19

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

var val = $("select.opts:visible option:selected ").val();

Ответ 20

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

или же

$('#select option[value="myValue"]').prop("selected",true).trigger("change");