problem with dynamic select

[Michal Trzcinski]

Here i have small HTML page with JS:
http://jz.vanet.pl/dynamic_select.html

If i choose Group1 or Group2 in sel1 then sel2 autofill with JS table.
If i choose Group1 or Group2 in sel3 then sel4 autofill with JS table.

Problem:
If i choose Group1 in sel1 and after that choose Group1 in sel3 then
options
in "select" sel2 gone... Why? I think code is ok.
Tested on Firefox and Konqueror. Don't know how IE.

Source:

[start_code]

<script name="javascript">

var theItem = new Array();

theItem[1] = new Array();
theItem[1][1] = new Option("Item1","1");
theItem[1][2] = new Option("Item2","2");
theItem[2] = new Array();
theItem[2][1] = new Option("Item3","3");
theItem[2][2] = new Option("Item4","4");

function newSelect(theSel,theGroupNo) {

var selLength = theSel.length;

for (i=selLength;i>=0;i--) {

theSel.options = null;

}

var theItemLength = theItem.length;

for (i=theItemLength;i>=0;i--) {

theSel.options = theItem[theGroupNo];

}

}

</script>
Sel1:
<select id="sel1"
onChange="newSelect(document.getElementById('sel2'),this.value)"
size="2">
<option value="1">Group1
<option value="2">Group2
</select>
Sel2:
<select id="sel2" size="2">
</select>
Sel3:
<select id="sel3"
onChange="newSelect(document.getElementById('sel4'),this.value)"
size="2">
<option value="2">Group2
<option value="1">Group1
</select>
Sel4:
<select id="sel4" size="2">
</select>

<script name="javascript">

newSelect(document.getElementById('sel2'),1);
newSelect(document.getElementById('sel4'),2);
document.getElementById('sel1').options[0].selected = true;
document.getElementById('sel3').options[0].selected = true;


</script>

[end_code]