Установить опцию выбора 'selected', по значению

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

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

Ознакомьтесь с этим методом jQuery.

ПРИМЕЧАНИЕ. Приведенный выше код не вызывает событие изменения. Для полной совместимости его нужно называть так:

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

Чтобы выбрать параметр со значением «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)

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

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

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

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

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

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

Итак, базовый принцип работы: Если бы вы делали это на прямом 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');

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

Вы можете добиться этого с помощью разных методов:
(помните, что если элемент должен быть управляемым, лучше дать ему идентификатор или класс, а не иметь его родительский элемент идентификатором или классом).
Здесь, поскольку div имеет класс для выбора внутри него, код будет:

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

or

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

Если классу было бы дано право выбирать самого себя, код будет таким:

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

or

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

or

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

Для динамической передачи значения используется следующий код:
valu = val2;

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

Если элемент добавляется через ajax, вам нужно будет указать 'id' вашему элементу и использовать
window.document.getElementById иначе вам нужно будет присвоить 'class' вашему элементу и использовать
window.document.getElementById

Вы также можете выбрать значение элемента select по его порядковому номеру.
Если вы указали идентификатор выбранному элементу, код будет:

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

Помните, что когда вы изменяете значение select, как указано выше, метод изменения не вызывается.
то есть, если вы написали код для выполнения некоторых действий при изменении select, вышеуказанные методы изменят значение select, но не вызовут изменение. < br> для запуска функции изменения вам нужно добавить .change () в конце. поэтому код будет:

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

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

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

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

JS Fiddle

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

Это хорошо работает, где #graphtype - это идентификатор тега select.

пример выберите тег:

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

Использовать:

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

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

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

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

SelectComponent:

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

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

В основном симуляция действий человека.

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

Большинство людей использовали $("div.id_100").val("val2").change();, чтобы заставить его работать на них. Мне пришлось немного изменить это до $("div#idOfDiv select").val("val2").trigger("change").

Этого тоже было недостаточно, я также должен был убедиться, что я дождался загрузки документа. Мой полный код выглядит так:

$(document).ready(function() {
    $("div#idOfDiv select").val("val2").trigger("change");
});

Надеюсь, это поможет кому-то с той же проблемой, что и я!

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

Мне нужно было выбрать параметр, но два параметра могли иметь одинаковое значение.
Это было чисто для визуальной (интерфейсной) разницы.
Вы можете выбрать вариант (даже если у двух есть то же значение) вот так:

let options = $('#id_100 option')
options.prop('selected', false)   // Deselect all currently selected ones
let option = $(options[0])        // Select option from the list
option.prop('selected', true)
option.parent().change()          // Find the <select> element and call the change() event.

Это отменит выбор всех выбранных в данный момент <option> элементов. Выбирает первый (с помощью options[0]) и обновляет элемент <select> с помощью события change.