Встановіть вибраний варіант поля вибору


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 ()? Можливо, код виконується, коли поле вибору ще не готове.
Морф

Відповіді:


495

Це безумовно має спрацювати. Ось демонстрація . Переконайтеся, що ви помістили свій код у $(document).ready:

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

4
ОК, коли я
випадаю

2
ах, я заявив це не у функції, готовій до документа ... дякую!
Оновлення

7
Не так добре, як встановлення атрибута "вибрано" на "вибрано".
Адал

6
@Adal Чому це не так добре, як встановлення атрибута "selected" на "selected"?
Шон

26
Про всяк випадок, коли хтось дивується, 'Gateway 2'передане функції valвідповідає значенню valueатрибута параметра select, а не його тексту. Дивіться цей 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)що працює, з візуальним оновленням спадного списку.
Великий багатий

Тільки той, хто працював на мене. Підозрюється, оскільки я використовую спеціальну бібліотеку вибору.
Луї М.

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

<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 selectmenu, не стандартний 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>


чудове рішення. але схоже, що він не видаляє вибраний атрибут із попередньо вибраних параметрів
System Rebooter

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()був неправильним способом зробити це задовго до опублікування цієї відповіді.
Auspex

-2

Доповнення до @icksde та @Korah (THX обидва!)

При побудові параметрів за допомогою AJAX документ. може бути запущений до створення списку, так

Це не працює

$(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.