How to create a select drop-down using data from an array of objects in JavaScript?

Question

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

Sorry, I meant I cannot use that method to create the select element, nor can I use options.add(new Option() — Mike0809
– Mike0809, Commented Jan 8, 2019 at 0:06

Jack Bashford · Accepted Answer · 2019-01-08 01:34:42Z

2

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

answered Jan 8, 2019 at 1:34

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

veeKINGPIN · Accepted Answer · 2019-01-08 00:50:15Z

0

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.com/jsref/met_select_add.asp for more info.

and a working example here https://jsfiddle.net/L5342j0y/

answered Jan 8, 2019 at 0:50

veeKINGPIN

1051 silver badge7 bronze badges

1 Comment

Mike0809 Over a year ago

But is it possible to create the elements without using the createElement() method?

prasad_ · Accepted Answer · 2019-01-08 02:05:16Z

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

Collectives™ on Stack Overflow

How to create a select drop-down using data from an array of objects in JavaScript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related