dynamic <select> filling not working in IE

[bobming]

I'm creating a booking form for a beauty salon, and part of it involves choosing the type of treatment. There are two drop-down menus, the first of which contains the treatment categories. When a category is chosen, a javascript function empties the second drop-down menu and then fills it with all treatments of that category. Or so it should!

I've written the code and it works absolutely fine in Firefox, but nothing seems to happen when I try it in Internet Explorer.

Here's the JavaScript:

var category; //both arrays filled 
var names; //from MySQL query
function treatSelect(cat)
{
var i = 0;
var j = 1;
document.bookingForm.treat_name.options.length = 0;
document.bookingForm.treat_name.options[0] = new Option('---select treatment---');
for(i=0; i<category.length; i++)
{
if(category[i] == cat)
{
document.bookingForm.treat_name.options[j] = new Option(names[i], names[i]);
j++;
}
}
}

And the HTML:

<p>Treatment: <select name="treat_category">
<option>--Category--</option>
<option value="1"
onChange=treatSelect('facials')>Facials</option>
<option value="2" onClick=treatSelect('body')>Body</option>
<option value="3" onClick=treatSelect('hnf')>Hands &amp; Feet</option>
<option value="4" onClick=treatSelect('eyes')>Eyes</option>
<option value="5" onClick=treatSelect('waxing')>Waxing</option>
<option value="6" onClick=treatSelect('packages')
>Packages</option>
</select>
<select name="treat_name">
</select></p>

I'm guessing it's something to do with the way IE handles the DOM? I hope someone can help me, it's 3am here and I'm way too tired right now to work this out!

Thanks in advance

[kaled]

Your html doesn't appear to make sense, however...

Value 1 uses the onchange event and others use the onclick event.

I have never used an onclick event for <option> values. I suspect you need to use the onchange event for the <select> object instead, but I could be mistaken.

Kaled.

[bobming]

ah, the onChange being there is because I was fiddling around with onChange and onClick earlier, they're all supposed to be onClick. onChange didn't seem to do anything in Firefox OR IE.

The html is definitely valid, this is only a snippet of the whole form. Does remind me though that I should mention this part of the form is within a fieldset element. Does this affect how IE moves along the DOM tree?

[bobming]

Silly me! I've worked it out now.

I was misunderstanding the scope of 'onChange', putting it into each option element instead of just once in the select element. I realised that's why 'onClick' wouldn't work in IE.

It's all working nicely now :)