Как создать выпадающий список, используя данные из массива объектов в JavaScript? - PullRequest
Новая
       25

Как создать выпадающий список, используя данные из массива объектов в JavaScript?

0 голосов
/ 08 января 2019

У меня есть массив объектов, которые я хотел бы использовать для заполнения раскрывающегося списка параметров Select, но эти элементы еще не существуют и должны быть созданы с нуля.

У меня есть рабочий код, использующий метод createElement, но я не могу использовать этот метод и не могу использовать options.add(new Option()). Как еще можно создать элементы выбора и опции в 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));
    	}
    }

Ответы [ 3 ]

0 голосов
/ 08 января 2019

Вы можете просто создать строку с литералами шаблона (проще и лаконичнее конкатенации) и добавить ее к элементу select: 

optionsList.forEach(e => selectTag.innerHTML += `<option value=${e.value}>${e.text}</option>`);
0 голосов
/ 08 января 2019

В следующем HTML и JavaScript показано, как добавить Select и Options, используя данные из массива объектов, содержащих метки option и их значения: 

<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);
};
0 голосов
/ 08 января 2019

Вместо того чтобы сказать 

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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...