[RESOLVED] Javascript obj.add won't work in IE7

[ixalmida]

(Please no "Don't use IE7" comments...)

The following code to dynamically change drop-down values works perfectly in Firefox, but fails in IE7:

function changeSubhead(hdg)
  {
  // Get a reference to the select box...
  var obj = document.getElementById("subhead_id");
  // Remove all options from the select box...
  obj.options.length = 0;
  var x;
  for(x = 0; x < subhead[hdg].length; ++x)
    {
    obj.add(new Option(subhead[hdg][x][0], subhead[hdg][x][1]), null);
    }
  }

IE7 gives me a "type mismatch" on the "obj.add" method (that line, char 5). Can someone tell me what's up?

Here's some other relevant code...

Sample data:

subhead[6][1] = ['Accounts Payable', 610];

HTML:

<select name="heading_id" onChange="changeSubhead(this.selectedIndex);">
...
</select>

<select name="subhead_id" id="subhead_id">
  <option value="0"></option>
</select>

[ixalmida]

I solved this myself. Either I.E. doesn't support "create" properly, or it doesn't like the select object reference. Here is the revised code that works in both browsers (I'm assuming all).

// Change subheading function...
function changeSubhead(hdg)
  {
  var h = hdg;
  // Remove all options from the select box...
  document.infoshare.subhead_id.options.length = 0;
  var x;
  for(x = 0; x < subhead[h].length; ++x)
    {
    document.infoshare.subhead_id.options[x] = new Option(subhead[h][x][0], subhead[h][x][1], null);
    }
  }

...where "infoshare" is the form name, "subhead_id" is the select box name, and "subhead" is a 3-dimensional array. Think of "h" as the heading, "x" is the subheading, and "0/1" are the name/value pair for the select option.