Изменение его с помощью jQuery select не показывает выбранную опцию

Question

У меня есть скрытая форма с несколькими полями выбора и некоторыми полями ввода.Нажатие на кнопку должно показать эту форму и установить некоторые значения в полях.Поля ввода заполнены заданными значениями, но у меня проблема с полями выбора.

Используя этот код:

$("#form select[name=user]").val(value);

опция с этим значением получает атрибут «выбранный» (проверено в Firebug), ноПоле выбора по-прежнему показывает опцию «Выбрать» (начальную).

Я пытался сделать фокус и размытие после значения параметра, но это тоже не сработало.

Есть предложения?

---

Это в значительной степени стандартная форма:

<form action="#" id="form" class="fix">
<div class="holder">
    <label>User:</label>
    <select name="user" class="styled">
        <option value="0" selected>Choose</option>
        <option value="1">User 1</option>
        <option value="2">User 2</option>
        </select>
    </div>
</form>

И, вызывая оператор jQuery:

$("#form select[name=user]").val('2');
$("#form").show();

, я получаю это в Firebug:

<form action="#" id="form" class="fix" style="display:none">
<div class="holder">
    <label>User:</label>
    <select name="user" class="styled">
        <option value="0">Choose</option>
        <option value="1">User 1</option>
        <option value="2" selected>User 2</option>
        </select>
    </div>
</form>

но текст select остается "Choose".Если я отправляю форму, значение передается правильно.

Чем после сброса формы и выбора какой-либо опции, текст выбранной опции отображается правильно.Вот что странно для меня.

Answer 1

Я нашел решение. Я забыл назвать событие изменения для. Я не знал, что jQuery не делает это автоматически. Итак, код для решения:

$("form select[name=user]").val(value).change();

Answer 2

У меня была такая же проблема с раскрывающимся HTML-тегом . И получил решение. То, что я анализирую во время использования .change (), .attr () и .prop (), доступно ниже.

1. .change () : Когда я использовал .change () , в моем случае это не сработало, поэтому оно ненадежно. Также проблема с версией браузера.
2. .attr () : Когда я использовал .attr () метод / функцию, например. $('#db_service option[value=1]').attr('selected', 'selected'); Анализ: Он установил атрибут опции тега select на selected = selected, когда увидел исходный код. Но на экране изменения НЕ появляются.
3. .prop () : Когда я использовал .prop () метод / функцию, например. $('#db_service option[value=1]').prop('selected', 'selected'); Анализ: Это НЕ установило атрибут опции тега select на selected = selected, когда я увидел исходный код. Но на экране появляются изменения.

Мое решение: Использовал оба .attr () и .prop () для более идеального результата

$('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected');<br> $('#db_service').val("1").change()

Answer 3

У меня была такая же проблема.На http://api.jquery.com/attr/, есть некоторые заметки о методе .prop () вместо .attr ().Также, как и ответ Jovica, измененная опция появляется только в Firefox (20.0 - моя версия), если в конце мы используем метод .change ().

Answer 4

У меня была та же проблема, я пытался изменить выбранную опцию выбора в скрытой форме.

.attr(attribute, value) не работал, так как отображаемая опция не отображалась, даже если выбранный атрибут был правильно обновлен. .prop(property,value) сделал свое дело.

Answer 5

Я хотел бы отметить, что я попробовал все здесь, и только добавление следующей строки чуть выше $("#form select[name=user]").val(value); работало для меня:

$('#form select[name=user]').trigger("updated");

Answer 6

'#form select[name=user]' пытается выбрать элемент <select name="user">, который является дочерним элементом элемента с идентификатором "form" ... например:

<div id="form">
  <select name="user">  // This element

Я полагаю, вы хотите следующее:

$("form select[name=user]").val(value);

Теперь следует выбрать элемент <select name="user">, который является дочерним элементом формы, например:

<form>
  <select name="user"> //This element