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.
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));
}
}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.
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));
}
}- What "I can't use that" means? – quirimmo Commented Jan 8, 2019 at 0:04
- Sorry, I meant I cannot use that method to create the select element, nor can I use options.add(new Option() – Mike0809 Commented Jan 8, 2019 at 0:06
3 Answers
Reset to default 2You 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>`);
Instead of saying
selectTag.options.add(new Option(...))
Simply create a new 'option' element and then add it to the select tag like this
optionsList.forEach(function(item, index, array) {
var opt = document.createElement("option");
opt.text = item.label;
opt.value = item.value;
selectTag.add(opt);
});
You can look at this link https://www.w3schools./jsref/met_select_add.asp for more info.
and a working example here https://jsfiddle/L5342j0y/
The following HTML and JavaScript shows how to add a Select and Options using data from an array of objects containing option labels and their values:
<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);
};
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745434972a4627565.html
评论列表（0条）