use a javascript array to fill up a drop down select box

Question

I have a text file which I am reading and storing the data in a javascript array, it's a list of cuisines. I want to use the array to fill up a drop down select box. I know how to hard code in the values for the drop down box (using correct me if i'm wrong) but I want to be able to use the array to fill it up instead.

<script type="text/javascript">
var cuisines = ["Chinese","Indian"];            
</script>

<select id="CusineList"></select>

I have hard coded an array for simplicity, the "CuisineList" is my drop down box

If you are reading this text file on the server, you probably want to generate the array using PHP or whatever server language you're using. — davidgoli
– davidgoli, Commented Jun 29, 2012 at 2:10

jackwanders · Accepted Answer · 2015-07-16 14:57:33Z

88

Use a for loop to iterate through your array. For each string, create a new option element, assign the string as its innerHTML and value, and then append it to the select element.

var cuisines = ["Chinese","Indian"];     
var sel = document.getElementById('CuisineList');
for(var i = 0; i < cuisines.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisines[i];
    opt.value = cuisines[i];
    sel.appendChild(opt);
}

DEMO

UPDATE: Using createDocumentFragment and forEach

If you have a very large list of elements that you want to append to a document, it can be non-performant to append each new element individually. The DocumentFragment acts as a light weight document object that can be used to collect elements. Once all your elements are ready, you can execute a single appendChild operation so that the DOM only updates once, instead of n times.

var cuisines = ["Chinese","Indian"];     

var sel = document.getElementById('CuisineList');
var fragment = document.createDocumentFragment();

cuisines.forEach(function(cuisine, index) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisine;
    opt.value = cuisine;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

DEMO

edited Jul 16, 2015 at 14:57

answered Jun 29, 2012 at 2:15

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

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

3 Comments

Wardruna Over a year ago

It is written as "CusineList" in original question

Ferguzz Over a year ago

is there a way to stop the select element showing up empty for a split second before the options are added?

Mathias Zaja Over a year ago

Could not manage to make work none of the 2 solutions (no matter the browser) .appendChild(opt) generates an error !

Alexander Heim · Accepted Answer · 2016-04-29 09:19:14Z

4

This is a part from a REST-Service I´ve written recently.

var select = $("#productSelect")
for (var prop in data) {
    var option = document.createElement('option');
    option.innerHTML = data[prop].ProduktName
    option.value = data[prop].ProduktName;
    select.append(option)
}

The reason why im posting this is because appendChild() wasn´t working in my case so I decided to put up another possibility that works aswell.

answered Apr 29, 2016 at 9:19

Alexander Heim

1449 bronze badges

2 Comments

Rafael Corzo Over a year ago

How i can add option like "Choice" as first option?

sMyles Over a year ago

this is also assuming that jQuery is being used, for javascript use document.getElementById("productSelect")

Collectives™ on Stack Overflow

use a javascript array to fill up a drop down select box

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related