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 个答案: