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
Make Browser Window Blink in Task Bar
How to Extend Function with Es6 Classes
How to Logout of an Application Where I Used Oauth2 to Login with Google
Adding Custom Properties to a Function
Most Efficient Way to Concatenate Strings in JavaScript
How to Detect When the Mouse Leaves the Window
Dynamic Function Name in JavaScript
JavaScript Url Decode Function
How to Prevent Caching of My JavaScript File
JSON.Stringify() Array Bizarreness with Prototype.Js
Adding Custom Functions into Array.Prototype
Basic JavaScript Promise Implementation Attempt
JavaScript Variables Declare Outside or Inside Loop
Safari 3Rd Party Cookie Iframe Trick No Longer Working
Fetch: Reject Promise and Catch the Error If Status Is Not Ok