Установить опцию select «selected» по значению


953

У меня есть selectполе с некоторыми опциями. Теперь мне нужно выбрать один из них optionsс помощью jQuery. Но как я могу это сделать , когда я знаю только valueиз , optionкоторый должен быть выбран?

У меня есть следующий HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Мне нужно выбрать вариант со значением val2. Как это может быть сделано?

Вот демонстрационная страница: http://jsfiddle.net/9Stxb/


Для Single Value of Dropdown используйте .val ('5'), для множественного выбора используйте val (['5', '4', '8']) full demo freakyjolly.com/…
Code Spy

Ответы:


1537

Есть более простой способ, который не требует, чтобы вы входили в тег options:

$("div.id_100 select").val("val2");

Проверьте этот метод jQuery .


18
Это может вызвать ошибки в FF (по крайней мере), возникающие в пустом окне выбора
Джонатан

21
Постер вопроса начинается с: «У меня есть поле выбора с некоторыми опциями ...», поэтому оно не пустое, поэтому решение остается правильным.
pinghsien422

8
@JamesCazzetta отправить массив Валу: .val(["Multiple2", "Multiple3"]). api.jquery.com/val/#val-value
scipilot

133
Мне пришлось вручную вызывать, .val(x).change();чтобы вызвать событие onChange выбора, кажется, установка val () не запускает его.
scipilot

16
Будьте осторожны: val () может устанавливать значения, которые не существуют в опциях.
Даниэль

429

Чтобы выбрать параметр со значением «val2»:

$('.id_100 option[value=val2]').attr('selected','selected');

5
Это лучшее решение, если желаемое значение может быть или не быть вариантом, и вы не хотите вносить изменения, если оно не является вариантом. Если вы используете .val()select и пытаетесь выбрать значение, которого там нет, оно отменит все.
Уолли Альтман

Согласитесь - это самый элегантный вариант - понятный и по существу. Не уверен, что «проп» работает лучше во всех случаях (браузеры). Но это, безусловно, делает легкий поиск для вас.
Ли Фуллер

4
Кроме того, я использовал, $("select[name=foo] option[value=bar]).attr('selected','selected');который также работал хорошо для всех браузеров, которые я тестировал.
Ли Фуллер

1
Мне нравится этот ответ лучше, чем принятый ответ, потому что: element.outerHTML обновляется с этим, тогда как он не с принятым ответом.
HoldOffHunger

2
Стоит отметить, что это не будет работать, если выпадающий список был скрыт, поэтому в моем случае я использую плагин select boxit, но пытаюсь вызвать изменение окна выбора, чтобы оригинальный код с обработчиком onchange для выпадающего меню все еще работал. Просто нужно обновить код для нового элемента, который является элементом selectboxit
chris c

333

Используйте change()событие после выбора значения. Из документов:

Если поле теряет фокус без изменения содержимого, событие не инициируется. Чтобы вызвать событие вручную, примените .change()без аргументов:

$("#select_id").val("val2").change();

Больше информации на .change () .


22
Это заслуживает гораздо больше голосов и принадлежит к вершине. Его правильный путь, не пустячный с prop, и attrт.д. , и progagates всех событий должным образом.
Polygnome

1
Да, это правильно распространяет все события. В моем тестировании «attr» работал первый раз, затем все оставалось «выбранным». Я использовал «prop», который изменил все правильно, но не распространял такие события, как (показать / скрыть) другие поля. Этот ответ работал во всех случаях и должен считаться правильным.
ИЛЛИН

1
Если у вас уже есть слушатель, связанный с изменением, это вызовет бесконечный цикл.
qwertzman

1
Некоторое время изо всех сил пытался заставить мое глупое значение раскрывающегося списка измениться, это единственное сработавшее решение! Спасибо, приятель!
AxleWack

1
Спасибо. Я много искал, прежде чем нашел это предложение, и это было единственное, что сработало. Не уверен, почему это не на вершине.
Роб Санторо

58

Отмените выбор всего сначала и отфильтруйте выбираемые параметры:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

2
Значением выбранного атрибута может быть пустая строка или selected. Вы имели в виду .prop()?
rink.attendant.6

2
Хороший ответ. Принятый ответ заканчивается пустым выбором, когда значение не существует в опциях.
Раули Раджанде

5
ВЕРХ, лучший здесь. Для будущего использования я думаю, что мы должны использовать prop вместо attr.
Даниэль

Мне очень нравится это решение. Мне интересно, хотя, было бы лучше, с точки зрения производительности, если селектор был изменен на ".id_100> option"
Hill

43
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Установка в статус ожидания по значению

   $('#contribution_status_id').val("2");


27

Я думаю, что самый простой способ - выбрать установку val (), но вы можете проверить следующее. См. Как обрабатывать теги select и option в jQuery? для более подробной информации о вариантах.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

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

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Я предпочитаю этот метод над установкой val () напрямую. Мне тоже нравится устанавливать атрибут - помогает с отладкой. $ (this) .attr ("выбранный", "выбранный")
Крейг Джейкобс

17

Вы можете выбрать любой атрибут и его значение с помощью селектора атрибутов [attributename=optionalvalue], поэтому в вашем случае вы можете выбрать опцию и установить выбранный атрибут.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

Где valueзначение, которое вы хотите выбрать.

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

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

15

Лучший способ таков:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

В Chrome параметр $('<select>').val('asdf')не обновлял выбор, чтобы показать выбранный в данный момент параметр. Этот ответ решил эту проблему.
Джошуа Бернс

Хотя это тоже будет работать, но $ ('<select>'). Val ('asdf') хорошо работает в chrome 79.0.3945.88
QMaster

14

простой ответ на HTML

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

на JQuery, вызвать функцию ниже кнопки или что-то

$('#idUkuran').val(11).change();

это просто и 100% работает, потому что это взято из моей работы ... :) надеюсь, что это поможет ..


Ваше значение по умолчанию 1000? Почему бы не ""
voodoocode

2
это необязательно, вы можете изменить, как вам нужно .. :)
Манг Джоджот

14

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

Хорошо, так что некоторые основные дом: если вы делали это в прямом JavaScript, это вы бы сделали так:

window.document.getElementById('my_stuff').selectedIndex = 4;

Но вы не делаете это с прямым JavaScript, вы делаете это с JQuery. А в jQuery вы хотите использовать функцию .prop () для установки свойства, так что вы бы сделали это так:

$("#my_stuff").prop('selectedIndex', 4);

В любом случае, просто убедитесь, что ваш идентификатор уникален. В противном случае, вы будете биться головой о стену, задаваясь вопросом, почему это не сработало.


12

Самый простой способ сделать это:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

JQuery

$('select[name="dept"]').val('3');

Выход: это активирует ЛОР .


12

Лучше использовать change()после настройки выбора значения.

$("div.id_100 select").val("val2").change();

При этом код будет близок к изменению выбора пользователем, объяснение включено в JS Fiddle :

JS Fiddle


Почему это? Не могли бы вы объяснить немного?
71GA,

JS Fiddle . При использовании метода change () код будет близок к изменению, выбранному пользователем, в то время как есть прослушиватели при изменении, которые необходимо обработать.
Ник Цай

12

$('#graphtype option[value=""]').prop("selected", true);

Это хорошо работает, где #graphtypeидентификатор тега выбора.

Пример выбора тега:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>


8

Использование:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

Это работает для меня. Я использую этот код для анализа значения в форме обновления fancybox, и мой полный исходный код из app.js:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

И мой код PHP:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

7

.attr () иногда не работает в старых версиях jQuery, но вы можете использовать .prop () :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

4

Это работает наверняка для Select Control :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });


4

Ссылка на источник введите описание изображения здесь

Используйте метод val () jQuery для выбора одного или нескольких значений в DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

3

Попробуй это. Простой, но эффективный javaScript + jQuery смертельный комбо.

Выберите компонент:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Выбор:

document.getElementById("YourSelectComponentID").value = 4;

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

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

или создайте простую функцию, поместите в нее строку и вызовите функцию anyEvent, чтобы выбрать опцию

Смесь jQuery + javaScript делает волшебство ....


3

Это старый пост, но здесь есть одна простая функция, которая действует как плагин jQuery.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

Вы просто можете сделать что-то вроде этого:

$('.id_100').selectOption('val2');

Причина, по которой вы используете это, заключается в том, что вы изменяете выбранный satemant на DOM, который поддерживается кроссбраузером, а также будет инициировать изменение, чтобы вы могли его поймать.

Это в основном моделирование действий человека.


2
  • Вы должны помнить, что значение, которое вы хотите динамически изменить, должно совпадать с тем, которое присутствует в опциях, которые вы определяете в своем HTML, как есть case sensative. Вы можете изменить свое поле выбора динамически следующим образом,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work


1

Кажется, есть проблема с выпадающими элементами управления, которые не изменяются динамически, когда элементы управления создаются динамически, а не на статической HTML-странице.

В jQuery это решение работало для меня.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Точно так же, как приложение к первой строке кода без второй строки, фактически работало прозрачно, получение выбранного индекса было правильным после установки индекса, и если вы фактически щелкнули по элементу управления, он отобразил бы правильный элемент, но это не отражало в верхней метке элемента управления.

Надеюсь это поможет.


0

Проблема, с которой я столкнулся, когда значение является идентификатором, а текст - кодом. Вы не можете установить значение с помощью кода, но у вас нет прямого доступа к идентификатору.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here


-1

Это хорошо работает

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.