Dynamically adding option values to a selectbox from an array

Question

I need your help.

I have the following function below, that reads data from an array and then dynamically adds option values to a selectbox.

Is there a way to modify the array such that I can specify the text and the option value to be added?

ABC,"testing"
DEF,"the system"
GHI,"further testing"
JKL,"desired results"

So the select box now resembles the following:

<select>
<option value="testing">ABC</option>
<option value="the system">DEF</option>
<option value="further testing">GHI</option>
<option value="desired results">JKL</option>
</select>

ie.

var y = [
"ABC",
"DEF",
"GHI",
"JKL"
]
for (var i = 0; i < y.length; i++ ){
    document.getElementById('select1').options[i]=new Option(y[i], y[i])
}

Scott Mermelstein · Accepted Answer · 2013-11-05 15:51:58Z

2

You would need to change the array of strings to an array of objects:

var y = [
    {toDisplay: "ABC", value: "testing"},
    {toDisplay: "DEF", value: "the system"},
    {toDisplay: "GHI", value: "further testing"},
    {toDisplay: "JKL", value: "desired results"}
];

for (var i = 0; i < y.length; i++) {
    document.getElementById('select1').options[i] = new Option(y[i].toDisplay, y[i].value);
}

Of course, you can call the parameters within the objects whatever you want (e.g. text instead of toDisplay), as long as you're consistent.

answered Nov 5, 2013 at 15:51

Scott Mermelstein

15.4k4 gold badges51 silver badges77 bronze badges

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

Comments

Vadim · Accepted Answer · 2013-11-05 15:57:17Z

2

Try this:

var arr = [],
    key,
    options = {
        'value1': 'text1',
        'value2': 'text2',
        'value3': 'text3'
    };

for(key in options) {
    if(options.hasOwnProperty(key)) {
        arr.push(['<option value="', key, '">', options[key], '</option>'].join(''));
    }
}
document.getElementById('select1').innerHTML = arr.join('');

edited Nov 5, 2013 at 15:57

answered Nov 5, 2013 at 15:51

Vadim

8,7744 gold badges47 silver badges52 bronze badges

Comments

aash · Accepted Answer · 2013-11-05 16:04:09Z

0

Here is another way you can do it:

function populateOption(name, value){

    select = document.getElementById('selectbox');


    var opt = document.createElement('option');
    opt.value = value;
    opt.innerHTML = name;
    select.appendChild(opt);


}

text = {'ABC' : "testing",
        'DEF':"the system", 
        'GHI':"further testing",
        'JKL':"desired results"}
for(var key in text){
    populateOption(key, text[key]);
}

Here is the working code:

fiddle

answered Nov 5, 2013 at 16:04

aash

1,3231 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

Dynamically adding option values to a selectbox from an array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related