Question

我通过ajax调用填充select标签选项，之后我尝试使用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）中的开发工具按控制+ 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)

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

1 个答案: