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

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

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

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

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

19 ответов


селектор, чтобы получить средний вариант-элемент, значение

$('.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() поскольку он может содержать новую строку, что делает сравнение неудачным. Это происходит, когда параметры неявно закрыты (no </option> tag):

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

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


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

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

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

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

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

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

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

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

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


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


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

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

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

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


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

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

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


Я пойду с:-

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

для установки выберите значение с выбранным запуском:

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

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

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

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


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


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

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

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

попробуй такое

вы просто используете select field id вместо #id (т. е.#select_name)

вместо Параметр Значение используйте опцию select стоимостью

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

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

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

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

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

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

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

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

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

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