Question

我有称为“ provinsi”的数组数据，我在控制台上像普通数组一样拥有数组

这是我的代码

 <select id="select">
      <option value="default">default</option>
 </select>
 <script>
        console.log(provinsi)
        var select = document.getElementById("select");

        for(var i = 0; i < provinsi.length; i++)
        {
            var option = document.createElement("option"),
                txt = document.createTextNode(provinsi[i]);
            option.appendChild(txt);
            option.setAttribute("value",provinsi[i]);
            select.insertBefore(option,select.lastChild);
        }
    </script>

但是我得到这样的结果

这是我的控制台“ provinsi” 有什么建议吗？谢谢

Answer 1

我相信DOM尚未准备就绪。

尝试将代码放入IIFE。

(function() {
    // the DOM will be available here

    console.log(provinsi)
    var select = document.getElementById("select");

    for(var i = 0; i < provinsi.length; i++)
    {
        var option = document.createElement("option"),
            txt = document.createTextNode(provinsi[i]);
        option.appendChild(txt);
        option.setAttribute("value",provinsi[i]);
        select.insertBefore(option,select.lastChild);
    }

})();

**就像@karthick所说的那样，请确保将脚本加载在body标签的末尾。

Answer 2

我希望这能使编码愉快：)注意：使用原始值更改省份数组

$(document).ready(()=> {
  let provinces = ["test1", "test2", "test3", "test4" ]
  $.each(provinces, function(key,item) {
  $("#select").append(new Option(item, key));
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
      <option value="default">default</option>
 </select>

Answer 3

运行脚本时，DOM可能尚未完成加载。您应该在DOMContentLoaded上运行函数。

<select id="select">
      <option value="default">default</option>
 </select>
 <script>
  var provinsi = ["test1", "test2"];
        document.addEventListener("DOMContentLoaded", function(event) {
    //DOM fully loaded and parsed
    var select = document.getElementById("select");

        for(var i = 0; i < provinsi.length; i++)
        {
            var option = document.createElement("option"),
                txt = document.createTextNode(provinsi[i]);
            option.appendChild(txt);
            option.setAttribute("value",provinsi[i]);
            select.insertBefore(option,select.lastChild);
        }
  });
        
    </script>
<script>

</script>

如何绑定数组数据以选择选项

3 个答案: