如何通过 JavaScript/JQuery 更改选定的 DropDownList 项目？答案

【问题标题】：How to change selected DropDownList item via JavaScript/JQuery?如何通过 JavaScript/JQuery 更改选定的 DropDownList 项目？
【发布时间】：2020-04-24 05:21:52
【问题描述】：

我想使用 JS / JQuery 更改我的 ASP.NET DropDownList 的选定选项，并稍后获取选定的值。

在 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 中仍然选择了第一个选项。

我想在按钮 onclick 方法后面的代码中使用 selectedValue

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

但是这会返回 0 而不是 1，这意味着选项 1 仍然被选中。

那么我该怎么做才能正确设置第二个选项？为什么显示的文字会变成选项2的那个，而不是选中的属性？

干杯

【问题讨论】：

标签： javascript c# jquery asp.net

【解决方案1】：

你可以使用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，它反映了第一个或最后一个选定元素的索引，具体取决于 multiple 的值。值 -1 表示没有选择任何元素。

【讨论】：

使用这个有同样的结果。在 UI 中，您会看到“选项 2”，但在后面的代码中仍然有第一个项目选择了“选项 1”。
这是一个 asp:DropDownList。我想从作为 c# 事件函数的按钮 onclick 方法中获取 selectedValue。我应该使用 myDDL.SelectedValue;但这会返回 0 而不是 1。
请用所有这些细节更改问题；我们需要minimal, reproducible example 来帮助您。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我想通了。

问题是 DropDownList 的 ViewState 被禁用。

添加

myDDL.EnableViewState = true;

解决了问题。

现在，使用

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

工作正常。

【讨论】：