JavaScript - Populate Drop Down List with Array

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

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

JavaScript Create New Drop Down List, add Options to Select from Array

Changing my code to the following works now. Thank you James for getting me on the right track!

var button = document.createElement('button'),
button.onclick = prompt;
function prompt() {
    var blockingDiv = document.createElement('div');
    blockingDiv.id = 'PopupBackground';
    var divPopup = document.createElement('div');
    divPopup.id = 'DivPopup';
    var logo = document.createElement('div');
    logo.id = 'Logo';
    var content = document.createElement('div');
    content.id = 'Content';
    var dropList = document.createElement('select');
    dropList.id = 'DropListSelect';
    dropList.name = 'DropListSelect';
    content.appendChild(DropList);
    var options = 
    [
        {
            'text': 'Select',
            'value': '',
            'defaultSelected': true,
            'selected': true
        },
        {
            'text': 'Text 1',
            'value': 'A',
            'defaultSelected': false,
            'selected': false
        },
        {
            'text': 'Text 2',
            'value': 'B',
            'defaultSelected': false,
            'selected': false
        },
        {
            'text': 'Text 3',
            'value': 'C',
            'defaultSelected': false,
            'selected': false
        }
    ];
    for (var i = 0; i <= options.length - 1; i++) {
        var dropListOption = document.createElement('option');
        dropListOption.id = 'DropListOptions';
        dropListOption.name = 'DropListOptions';
        var type = options[i];
        dropListOption.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
        dropList.appendChild(dropListOption);
    }

Populate dropdown using a javascript object

I'm having trouble understanding how your situation is different than the solution offered in the article I linked, but for the sake of demonstration, I created a solution using the concepts from the article combined with your original code.

var fruits ={  "1": {        "id": 1,        "Description": "Apple",        "groupID": 0       },  "2": {        "id": 2,        "Description": "Peach",        "groupID": 0       }};var _select = document.createElement("select");for (var key in fruits) {  var fruit = fruits[key];  _select.options[_select.options.length] = new Option(fruit.Description, fruit.id);}
document.body.appendChild(_select);

---

Related Topics