Как изменить выбранный элемент DropDownList через JavaScript / JQuery?

Question

Я хочу изменить выбранную опцию моего ASP. NET DropDownList с помощью JS / JQuery и позже получить выбранное значение.

В DOM:

<select id="myDDL" name="myDDL">
  <option selected="selected" value="0"> Option 1 </option>
  <option value="1"> Option 2 </option>
  <option value="2"> Option 3 </option>
</select>

Я пытался $("#myDDL").val(1);, но это не работает на 100%. Текст этого сообщения будет отображаться («Вариант 2»), но в DOM по-прежнему выбран первый параметр.

Я хочу получить selectedValue в методе кода за кнопкой, используя

protected void myButton_Click(object sender, EventArgs e)
{
  int val = myDDL.SelectedValue;
  ...
}

, но это возвращает 0 вместо 1, что означает, что Вариант 1 все еще выбран.

Так что мне нужно сделать, чтобы правильно настроить второй вариант? И почему отображаемый текст меняется на вариант 2, а не на выбранный атрибут?

Cheers

Answer 1

$('#myDDL').change(function() {
        val= $('#myDDL :selected').map(function(i, el) {
            return $(el).val();
        }).get();
        console.log(val);
    });

Answer 2

Я понял это.

Проблема была в том, что ViewState DropDownList был отключен.

Добавление

myDDL.EnableViewState = true;

решило проблему.

Теперь использование

$("#myDDL").val(1);

работает нормально.

Answer 3

Вы можете использовать selectedIndex, например:

let select = document.getElementById("myDDL");
select.options.selectedIndex = 1;

<select id="myDDL" name="myDDL">
  <option selected="selected" value="0"> Option 1 </option>
  <option value="1"> Option 2 </option>
  <option value="2"> Option 3 </option>
</select>

HTMLSelectElement.selectedIndex - это long, который отражает индекс первого или последнего выбранного элемента в зависимости от значения множественного числа. Значение -1 указывает, что ни один элемент не выбран.