Question

104

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

rated 0 times [ 108] [ 4] / answers: 1 / hits: 134338 / 12 Years ago, fri, june 29, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maxd

Add To Favorites

Follow

Total Points: 568

Total Questions: 100

Total Answers: 101

Location: Serbia

Member since Tue, Jul 26, 2022

2 Years ago

answered 12 Years ago jazminkyrap · Accepted Answer

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