如何使用JavaScript中的对象数组中的数据创建选择下拉列表? [英] How to create a select drop-down using data from an array of objects in JavaScript?

问题描述

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

I have an array of objects that I'd like to use to populate a Select option dropdown, but these elements do not already exist and must be created from scratch.

我有使用 createElement 方法的工作代码，但是我不能使用该方法，也不能使用 options.add(new Option()).我还能如何在JavaScript中创建select和option元素?

I have working code using the createElement method, but I can't use that method nor can I use options.add(new Option()). How else can I create the select and option elements in the JavaScript?

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

推荐答案

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

You can just make a string with template literals (easier and more concise than concatenation) and append that to the select element:

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

这篇关于如何使用JavaScript中的对象数组中的数据创建选择下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！