Установить выбранную опцию окна выбора


352

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

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

Но это не работает. Любые идеи?


10
На самом деле, именно так оно и должно работать. Вы уверены, что устанавливаете значение в document.ready ()? Возможно, код выполняется, когда окно выбора еще не готово.
Morph

Ответы:


496

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

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

4
хорошо, когда я выпадаю из списка, он подсвечивается, но не отображается как первый элемент списка
Upvote

2
ааа я объявил это не в функции готовности документа ... спасибо!
Upvote

7
Не так хорошо, как установка атрибута «выбранный» в «выбранный».
Адаль

6
@Adal Почему это не так хорошо, как установка атрибута selected в значение selected?
Шон

26
На всякий случай, если кому-то еще интересно, 'Gateway 2'переданная функции функция valсоответствует значению valueатрибута опции выбора, а не его тексту. Посмотрите этот JSFiddle , который является слегка отредактированной версией демо Дарина, для примера того, что я имею в виду.
Кенни Эвитт

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

37

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


2
Очень похоже на то, $('#your-select-box-id :nth-child(2)').prop('selected', true)что работает, с визуальным обновлением Drop-Box.
Большой Богат

Только тот, который работал для меня. Подозреваю, потому что я использую пользовательскую библиотеку выбора.
Луи М.

15

Я обнаружил, что использование метода jQuery .val () имеет существенный недостаток.

<select id="gate"></select>
$("#gate").val("Gateway 2");

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

Кажется, это работает лучше для меня.

Для полей выбора

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

Для ввода текста

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

Для ввода текста

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

Для флажков

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

Для радио кнопок

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

12
  $("#form-field").val("5").trigger("change");

1
Было бы неплохо, если бы вы включили некоторую информацию об этом. Это отличный пример того, как вы ДОЛЖНЫ сделать это, ЕСЛИ у вас есть код, который следит за изменениями выбора.
sean.boyer

6

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

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

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



6

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

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

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

3
это только для выбора jqueryui, а не стандартного html
stuartdotnet

3

Я знаю, что есть несколько итераций ответов, но теперь это не требует 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>


отличное решение. но похоже, что он не удаляет выбранный атрибут из ранее выбранных опций
Перезагружатель системы

3

Некоторые случаи могут быть

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

1

Моя проблема

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

1
Вы проанализировали проблему правильно, но решение плохое и хрупкое. Вы должны использовать функцию обратного вызова, прикрепленную к вашему вызову ajax
icksde

-1

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

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

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


4
Как бы ни было полезно напоминать о проверке синтаксических ошибок, это не ответ.
Дробовик ниндзя


-2
// 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');
});

1
Это зациклится даже после выбранного значения, что неэффективно
Даниэль Нуриев

Плюс .attr()был неправильный способ сделать это задолго до того, как этот ответ был опубликован.
Ауспекс

-2

Дополнение к @icksde и @Korah (спасибо!)

При создании опций с помощью 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");
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.