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

У меня есть 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/

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

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

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

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

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

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

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

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

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

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

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

<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");

Для меня следующие сделали работу

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

Я думаю, что самый простой способ - выбрать установку 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);
    }
});

Вы можете выбрать любой атрибут и его значение с помощью селектора атрибутов [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);

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

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

простой ответ на 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% работает, потому что это взято из моей работы ... :) надеюсь, что это поможет ..

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

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

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

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

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

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

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

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');

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

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

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

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

JS Fiddle

$('#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>

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

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

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

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

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

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

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

Просто вставьте этот код:

$("#Controls_ID").val(value);

Ссылка на источник

Используйте метод 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>

Попробуй это. Простой, но эффективный 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 делает волшебство ....

Это старый пост, но здесь есть одна простая функция, которая действует как плагин 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, который поддерживается кроссбраузером, а также будет инициировать изменение, чтобы вы могли его поймать.

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

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

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

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

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

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

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

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

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

var value;

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

//Do work here

меня устраивает

$("#id_100").val("val2");

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

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
    });