如何使用JavaScript中的对象数组中的数据创建选择下拉列表？

Question

我有一个用于填充“选择”选项下拉列表的对象数组，但是这些元素尚不存在，必须从头开始创建。

我有使用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)); } }

Answer 1

而不是说

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/

Answer 2

您可以只使用模板文字（比连接更简单，更简洁）制作一个字符串，并将其附加到select元素：

optionsList.forEach(e => selectTag.innerHTML += `<option value=${e.value}>${e.text}</option>`);

Answer 3

以下HTML和JavaScript显示了如何使用包含选项标签及其值的对象数组中的数据添加Select和Options：

<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);
};

如何使用JavaScript中的对象数组中的数据创建选择下拉列表？

问题描述

3 个解决方案

解决方案1
0 2019-01-08 00:50:15

解决方案2
0 2019-01-08 01:34:42

解决方案3
0 2019-01-08 02:05:16

如何使用JavaScript中的对象数组中的数据创建选择下拉列表？

问题描述

3 个解决方案

解决方案1 0 2019-01-08 00:50:15

解决方案2 0 2019-01-08 01:34:42

解决方案3 0 2019-01-08 02:05:16

解决方案1
0 2019-01-08 00:50:15

解决方案2
0 2019-01-08 01:34:42

解决方案3
0 2019-01-08 02:05:16