[英]how to bind array data to select option
i have array data it call "provinsi" i got array on console like normal array我有数组数据它称为“provinsi”我在控制台上像普通数组一样得到数组
here's my code这是我的代码
<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>
but i got result like this但我得到了这样的结果
here's my console "provinsi"这是我的控制台“provinsi”
any suggest ?
有什么建议吗? thanks before
之前谢谢
I believe the DOM is not ready yet. 我相信DOM尚未准备好。
Try putting your code inside IIFE. 尝试将代码放入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);
}
})();
** Just to clarify as @karthick mentioned, make sure the script is loaded at the end of the body tag. **只是为了澄清@karthick所提到的内容,请确保将脚本加载在body标签的末尾。
I hope this will work happy coding :) Note: change your provinces array with orginal values 我希望这能使编码愉快:)注意:使用原始值更改省份数组
$(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>
The DOM may not have finished loading when your script is run. 运行脚本时,DOM可能尚未完成加载。 You should run your function on
DOMContentLoaded
. 您应该在
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>
You can use jquery each
function for looping
您可以使用
jquery each
函数进行looping
Javascript Code: Javascript代码:
var makers = [
{id: 1, name: 'Toyota'},
{id: 2, name: 'Nissan'},
{id: 3, name: 'Honda'}
]
$.each(makers, function (index, item) {
$('#makers-listing').append(`<option value="${item.id}">${item.name}</option>`);
});
Html Code: html代码:
<select id="makers-listing">
<option>Select Maker</option> <!-- This is default value -->
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.