it-roy-ru.com

Установить опцию 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/

783
w00

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

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

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

1283
pinghsien422

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

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

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

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

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

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

233
jitendrapurohit

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

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)
45
silly
<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");
39
Developer

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

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

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

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

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

13
Mang Jojot

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

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.

11
Pran

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

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

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

JS Fiddle

11
Nick Tsai

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

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

$("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));
}
8
Adityo
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
7
Ravi Wadje

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

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

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

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

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

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

7
Yitzhak

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

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

Это работает наверняка для Выберите элемент управления :

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

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

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

3
Ivijan Stefan Stipić

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

$("#Controls_ID").val(value);
3
Osama khodrog

Попробуй это. Простой, но эффективный 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
Majid Ali Khan
  • Вы должны иметь в виду, что значение, которое вы хотите динамически изменить, должно совпадать с тем, которое присутствует в опциях, которые вы определяете в своем HTML, как это case sensative. Вы можете динамически изменить поле выбора следующим образом:

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

2
Shahrukh Anwar

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

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
    });
0
Mohammed Muzammil

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

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

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

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

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

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

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

0
user2288580