Change value of dropdowns in javascript

I have a form where there are 16 individual elements the user must fill. In the dropdown for these elements are the values 0-16. The initial value of all these elements is zero.

The user may choose each value from 1 to 16 for each element, but they may only choose each element once. As they choose each value, I am changing the value of the dropdowns of all the elements to eliminate the chosen values. In the end, the only values left in each dropdown are 0 and the value the user chose for that dropdown. It also puts back the values if the user changes a value back t开发者_运维知识库o zero.

The way I have it set up works fine in Chrome and FireFox, but fails in IE. The problem is the opts.options is an undefined error. Somehow it works in all browsers but IE. I think I need to pass the element as an object to the method that populates the dropdowns.

Here is how the methods are called in the PHP/HTML, it also calls the methods on load to initialize the dropdowns:

echo "<TD bgcolor=$color width=15><SELECT name='$pts' onChange='populatePoints(this)' </SELECT></TD>n";

Here is the relevant JS:

   function populatePoints(x){

 setOptions (document.form1.G1_Points)

 setOptions (document.form1.G2_Points)

 setOptions (document.form1.G3_Points)

 setOptions (document.form1.G4_Points)

 setOptions (document.form1.G5_Points)

 setOptions (document.form1.G6_Points)

 setOptions (document.form1.G7_Points)

 setOptions (document.form1.G8_Points)

 setOptions (document.form1.G9_Points)

 setOptions (document.form1.G10_Points)

 setOptions (document.form1.G11_Points)

 setOptions (document.form1.G12_Points)

 setOptions (document.form1.G13_Points)

 setOptions (document.form1.G14_Points)

 setOptions (document.form1.G15_Points)

 setOptions (document.form1.G16_Points)


 }

 function setOptions (opts){

 pointValue = opts.value

 opts.options.length = 0

 var x = 0

 opts.options[x] = new Option(0)

 x++

 for (i=1;i<17;i++) {

 if (document.form1.G1_Points.value != i &&

 document.form1.G2_Points.value != i &&

 document.form1.G3_Points.value != i &&

 document.form1.G4_Points.value != i &&

 document.form1.G5_Points.value != i &&

 document.form1.G6_Points.value != i &&

 document.form1.G7_Points.value != i &&

 document.form1.G8_Points.value != i &&

 document.form1.G9_Points.value != i &&

 document.form1.G10_Points.value != i &&

 document.form1.G11_Points.value != i &&

 document.form1.G12_Points.value != i &&

 document.form1.G13_Points.value != i &&

 document.form1.G14_Points.value != i &&

 document.form1.G16_Points.value != i &&

 document.form1.G15_Points.value != i){

 opts.options[x] = new Option(i)

 x++}}

 opts.value = pointValue

 }

IE doesn't like clearing options this way: opts.options.length = 0

Clear out your options like this in IE:

for (i=options.length-1; i>=0; i--)   {
      select.removeChild(options[i]);   
}

or do this (fastest way to clear):

select.innerHTML = "";