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

Answer 1

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