jquery - Установите выбранную опцию в поле выбора




html jquery-selectors html-select (13)

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

$("#gate").val('Gateway 2');

с

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>

Но это не работает. Есть идеи?


Answers

$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

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

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

Проверьте наличие синтаксических ошибок перед вызовом.


Моя проблема

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

Я была такая же проблема . Единственное отличие от вашего кода заключается в том, что я загружал окно выбора через вызов ajax, и как только был выполнен вызов ajax, я установил значение по умолчанию для поля выбора

Решение

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

Это определенно должно работать. Вот демо . Убедитесь, что вы поместили свой код в $(document).ready :

$(function() {
    $("#gate").val('Gateway 2');
});

$('#gate').val('Gateway 2').prop('selected', true);


// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

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

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>


Это будет другой вариант:

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

Это прекрасно работает. Смотрите эту скрипту: http://jsfiddle.net/kveAL/

Возможно, вам нужно объявить свой jQuery в обработчике $(document).ready() ?

Кроме того, возможно, у вас есть два элемента с одинаковым идентификатором?


$(function() {
$("#demo").val('hello');
});

Дополнение к @icksde и @Korah (thx both!)

При создании параметров с помощью AJAX document.ready может быть запущен до создания списка, поэтому

Это не работает

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

Это делает

Тайм-аут работает, но поскольку @icksde говорит, что он хрупкий (мне действительно понадобилось 20 мс вместо 10 мс). Лучше поместить его в функцию AJAX следующим образом:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});

У меня такая же проблема.

Решение: добавьте обновление.

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');




jquery html jquery-selectors html-select