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 bobox 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 boboxes? Is it possible? Cheers

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 bobox 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 boboxes? Is it possible? Cheers

• javascript
• arrays
• bobox

Share Improve this question Follow asked Dec 12, 2012 at 15:15 noneJavaScriptnoneJavaScript 84533 gold badges2121 silver badges4141 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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/YJj3b/1