[英]How to populate a drop down list in HTML5 using javascript?
我想从Web服务中获取数据,并将其填充到一个下拉列表中。 我的代码如下。 将创建一个下拉列表,但无法填充数据。 请给我一些代码。
function jsondata(data)
{
alert("JSONdata");
var parsedata=JSON.parse(JSON.stringify(data));
var captain_details=parsedata["Captain Details"];
var drop_down=document.getElementById("captainlist");
var drop=document.createElement("select");
for(var i=0;i<captain_details.length;i++)
{
var captain = captain_details[i];
captain_name=captain['Captain Name'];
alert(captain_name);
document.getElementById("captainlist").appendChild(drop);
drop.add(captain_name,null);
}
}
在这种情况下, drop
是<select>节点而不是<option>节点-> document.getElementById("captainlist").appendChild(drop);
您应该创建<option>节点,设置其值和文本并将其添加到<select>元素中。 我假设var drop_down=document.getElementById("captainlist");
指向<select>节点
根据https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLSelectElement的要求 drop.add
需要HTMLElement,而不是文本字符串。
var data = [
{ name: "Mal Reynolds" },
{ name: "Piet Heyn" },
{ name: "Jean-Luc Picard" }
];
var elm = document.getElementById("captains"); // elm is a <select> element
for (var i = 0, len = data.length; i < len; i++) {
var name = data[i].name;
// create an option element
var option = document.createElement("option");
option.value = i;
option.textContent = name;
// add option
elm.add(option);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.