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

Answer 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