How to assign combobox values with javascript

Question

Imagine that you have an array like this:

myArray[0] = 1,2,3
myArray[1] = 2,3,5
myArray[2] = 1,4,5

Where (1,2,3),(2,3,5),(1,4,5) are combobox values.

eg. When myArray[0]:

<select name="somename" id="someid">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

eg. When myArray[1]:

<select name="somename" id="someid">
<option value="2">two</option>
<option value="3">three</option>
<option value="5">five</option>
</select>

Now, the point is assign one of this myArray[] values to the comboboxes? Is it possible? Cheers

musefan · Accepted Answer · 2012-12-12 15:20:09Z

2

Of course. You can loop the elements in the array and then build your html from that.

var html = '';

for(var i = 0; i < myArray[0].length; i++){
   html += '<option value="' + myArray[0][i] + '">' + myArray[0][i] + '</option>';
}

document.getElementById('someid').innerHTML = html;

NOTE: This is a very simple sample to demonstrate the logic. You will also of course need a way to convert your number to a text value (i.e. convert 1 to "one") if you really need that functionality.

If this isn't what you want, then try to explain your question better. It is not clear if you want to use a specific index of myArray for create one select. Or if you want to populate multiple select lists (which already exist) with the corresponding array values. If the latter, then you should be more clear about what "someid" really is so we can identify each select list correctly.

answered Dec 12, 2012 at 15:20

musefan

48.6k21 gold badges144 silver badges193 bronze badges

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

1 Comment

noneJavaScript Over a year ago

dont worry with one/two/etc are not related to 1,2,3,etc :)

Cerbrus · Accepted Answer · 2012-12-12 15:46:20Z

1

No jQuery, assuming you have the "Select" object already:

var s = document.getElementById('someid');
var words = ["one", "two", "three", "four", "five"];

for(var i = 0; i < myArray[0].length; i++){
   var t = document.createElement("option")
   t.value = myArray[0][i];
   t.textContent = words[myArray[0][i]-1];
   s.appendChild(t)
}

(Working Example)

Otherwise, add:

var s = document.createElement("select");
s.id = 'someid';
s.name = 'somename';
var words = ["one", "two", "three", "four", "five"];

for(var i = 0; i < myArray[0].length; i++){
   var t = document.createElement("option")
   t.value = myArray[0][i];
   t.textContent = words[myArray[0][i]-1];
   s.appendChild(t)
}
document.body.appendChild(s);

I prefer manual DOM manipulation (.textContent) over innerHTML, because innerHTML forces the browser to re-parse the entire DOM, each time it is used, since the browser can't possibly predict the structure of the added HTML. This makes DOM manipulation render faster than when using innerHTML

edited Dec 12, 2012 at 15:46

answered Dec 12, 2012 at 15:23

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

3 Comments

Cerbrus Over a year ago

@skdnewbie: In that case, the first section of code in my answer should do it, not?

noneJavaScript Over a year ago

no no no I think you misunderstood me. When it is myArray[1] then there is this optons: <option value="2">two</option>``<option value="3">three</option>``<option value="5">five</option>

noneJavaScript Over a year ago

Bu if myArray[2], then there is this options <option value="1">xpto</option><option value="4">xpto</option><option value="5">xpto</option>

score 1 · Accepted Answer · 2012-12-12 15:39:59Z

1

You can iterate over your array and create the appropriate DOM elements. Here is an example, you will need to add a lookup array of numeric values to words:

numwords = ["one", "two", "three", "four", "five"];
myArray = [];
myArray[0] = [1,2,3];
myArray[1] = [2,3,5];
myArray[2] = [1,4,5];
for(var i = 0; i < myArray.length; i++){
    var select = document.createElement('select');
    for(var j = 0; j < myArray[i].length; j++){
        var option = document.createElement('option');
        option.value = myArray[i][j];
        option.innerHTML = numwords[myArray[i][j] - 1];
        select.appendChild(option);
    }
    document.body.appendChild(select);
}

Here is a demonstration: http://jsfiddle.net/YJj3b/1

edited Dec 12, 2012 at 15:39

answered Dec 12, 2012 at 15:20

user1726343

2 Comments

noneJavaScript Over a year ago

in your live example I see some undifined values, is meant to be ?

user1726343 Over a year ago

@skdnewbie Yeah I accidentally typed plus instead of minus. Here's a fixed version: jsfiddle.net/YJj3b/1

Collectives™ on Stack Overflow

How to assign combobox values with javascript

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related