通過ajax調用填充下拉列表后，設置所選索引

Question

我正在通過ajax調用填充選擇標簽選項，然后嘗試使用javascript在下拉列表中設置所選項目。 但這似乎不起作用。

在我的Index.cshtml頁面中，我有這樣的select標記

<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）中的dev工具，按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)