通过ajax调用填充下拉列表后设置选定的索引

Question

我正在通过 ajax 调用填充选择标签选项，然后我尝试使用 javascript 在下拉列表中设置所选项目。但它似乎不起作用。

在我的 Index.cshtml 页面中，我有这样的选择标签

<select id="ddlState">
</select>

在同一页面上，我使用 ajax 调用来填充选项列表。

$.ajax({
    url: "/api/vmsApi",
    success: function (data) {
        console.log(data)
        for (var i = 0; i < data.length; i++)
        {
            $("#ddlState").append('<option value="'+data[i]+'">' + data[i]+ '</option>')
        }
    }
});

然后作为测试，我尝试将 selectedIndex 设置为大于 0.. 的值，如下所示：

document.getElementById("ddlState").selectedIndex = 2;

无论我为所选索引赋予什么值.. 第一项总是被选中....

这是为什么？

我的下拉列表确实填充了所有值。只是 selectedIndex 不会改变。

Answer 1

您确定以下操作无效吗？

$.ajax({
    url: "/api/vmsApi"
})
.then(
  (data) => {
        console.log(data);
        const select = $("#ddlState");
        data.forEach(
          data =>
            select.append(
              '<option value="'+
              data+
              '">'
              + data
              + '</option>'
          )
        );
        select[0].selectedIndex = 2;
    }
)
.then(
  undefined
  ,reject => console.error(reject)
);

如果这不起作用，您能否在控制台选项卡中使用 chrome (F12) 中的开发工具按 control + shift + f 并查找 selectedIndex 可能您的页面上还有一些其他代码可以设置选定的索引。

解决您的评论：如果控制台适合控制台，则控制台会按原样显示值。

当您需要扩展一个值时，它会显示现在的值，而不是控制台记录它时的值。您可以在 devtools 控制台中运行以下代码并亲自查看：

var i = 0;
var arr = [];
while(++i<300){
  arr.push({value:i});
}
console.log("shows new values when you expand even though the log was before the change:",arr)
console.log("shows old value because no need to expand:",arr[0])
arr.forEach(x => x.value += 10);
console.log("shows new values because it is executed after change:",arr)