如何在JavaScript中使用对象数组中的数据创建选择下拉列表？
如何在JavaScript中使用对象数组中的数据创建选择下拉列表？
提问于 2019-01-08 07:58:56
我有一个对象数组，我想用它来填充Select option下拉菜单，但是这些元素还不存在，必须从头开始创建。
我有使用createElement方法的工作代码，但我不能使用该方法，也不能使用options.add(new Option())。我还能如何在JavaScript中创建select和option元素？
var optionsList = [
{
label: "Option 1",
value: "option-1"
},
{
label: "Option 2",
value: "option-2"
},
{
label: "Option 3",
value: "option-3"
}
];
if (optionsList.length == 0) {
console.log("No data");
} else {
var selectTag = document.createElement("SELECT");
document.body.appendChild(selectTag);
for (var i = 0; i < optionsList.length; i++) {
var option = optionsList[i];
selectTag.options.add(new Option(option.label, option.value));
}
}
回答 3
Stack Overflow用户
发布于 2019-01-08 09:34:43
您可以只使用模板文字生成一个字符串(比连接更简单、更简洁)，并将其附加到select元素：
optionsList.forEach(e => selectTag.innerHTML += `<option value=${e.value}>${e.text}</option>`);Stack Overflow用户
发布于 2019-01-08 08:50:16
而不是说
selectTag.options.add(new Option(...))只需创建一个新的'option‘元素，然后将其添加到select标记中，如下所示
optionsList.forEach(function(item, index, array) {
var opt = document.createElement("option");
opt.text = item.label;
opt.value = item.value;
selectTag.add(opt);
});您可以查看此链接https://www.w3schools.com/jsref/met_select_add.asp以获取更多信息。
下面是https://jsfiddle.net/L5342j0y/的一个工作示例
Stack Overflow用户
发布于 2019-01-08 10:05:17
下面的超文本标记语言和JavaScript显示了如何使用包含选项标签及其值的对象数组中的数据添加选择和选项：
<html>
<head>
<meta charset="utf-8">
<script src="app.js"></script>
</head>
<body onload="app()">
<p>Select your choice:</p>
<div id="div-id">
<!-- The select with data gets added here -->
</div>
</body>
</html>app.js
function app() {
var optionsList = [
{
label: "Option 1",
value: "option-1"
},
{
label: "Option 2",
value: "option-2"
},
{
label: "Option 3",
value: "option-3"
}
];
var selectTag = document.createElement("select");
for (let optObj of optionsList) {
let optEle = document.createElement("option");
optEle.text = optObj.label;
optEle.value = optObj.value;
selectTag.add(optEle);
}
var div = document.getElementById("div-id");
div.appendChild(selectTag);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54083539
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号