Установите опцию выбора "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/

ОТВЕТЫ

Ответ 1

Более простой способ не требует, чтобы вы вошли в тег параметров:

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Дополнительная информация находится на .change().

Ответ 4

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

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

Ответ 5

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

Ответ 6

Для меня было выполнено следующее

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

JS Fiddle

Ответ 11

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

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.

Ответ 12

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

Ответ 13

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

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

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

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

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

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

Ответ 18

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

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

Ответ 19

Просто введите этот код:

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

Ответ 20

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

Ответ 21

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

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

Ответ 22

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

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

Ответ 23

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

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

Ответ 24

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

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

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

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

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

Ответ 25

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

var value;

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

//Do work here