如何在下拉選項中顯示數組列表

Question

在谷歌上嘗試和搜索了許多類型之后，我現在沒有選擇在這里問..

我的問題是我想在 select 選項下拉菜單中顯示數據.. 日期是 json 數組列表..

這是我的代碼

<select name="" id="state_list">
     <option>select state</option>
</select>



<script>      
var url = "#";

    function getData() {
      fetch(url)
        .then((data) => {
          return data.json();
        })
        .then((covidData) => {

          var dropdown = document.getElementById("state_list");
          var stateList = covidData.data.regional;

     for (i = 0; i < stateList.lenght; i++) {
         dropdown[dropdown.lenght] = new Option(stateList[i],stateList[i]); 
    }
     })
 </script>

Answer 1

您可以執行以下操作來將您的stateList填充到您的下拉列表中。

var select = document.getElementById("state_list"); 
for(var i = 0; i < stateList.length; i++) {
    var opt = stateList[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}​

一個工作小提琴：

http://jsfiddle.net/shyntz0o/1/

Answer 2

您的lenght有誤，並且沒有正確關閉 function （缺少最后的} ）。 此外，您的選項附加邏輯也不起作用（再次因為錯字lenght ）。

 window.onload = function(){ var url = "https://api.rootnet.in/covid19-in/stats/latest"; function getData(){ fetch(url).then((data) => { return data.json(); }).then((covidData) => { var dropdown = document.getElementById("state_list"); var stateList = covidData.data.regional; for(var i=0; i<stateList.length; i++){ dropdown.appendChild(new Option(stateList[i].loc, stateList[i].loc)) } }) }; getData() }

 <select name="" id="state_list"> <option>select state</option> </select>