Drop Down onClick

[PeTeRUK]

Hi All!

I have a drop down box for a contact form. I want to be able to click one of the options in the drop down box, and have my form appear underneath. Here is what I have so far, this works fine in firefox, but not in IE or Opera. I understand this is becuase I cannot use onClick in OPTION, and I need to use an onChange in select, but I have zero JScript experience. I would be VERY grateful if someone could write me a quick script to show the DIV layer with the same ID and the option selected, and hide other DIV layers I specify the IDs of at the same time.

In my .css Stylesheet
.hide
{
display: none;
}

In my form document
<script type="text/javascript">
function doForms(id, newClass)
{
id=document.getElementById(id)
id.className=newClass;
}
</script><form name="selectsinging">
<SELECT>
<OPTION value="" selected>Pick One</option>
<OPTION value="">----------</option>
<OPTION value="book" onClick="doForms('booking', 'show'); doForms('info', 'hide');">Booking A Lesson</option>
<OPTION value="info" onClick="doForms('booking', 'hide); doForms('info', 'show');">Enquiring About A Lesson</option>
</select></form>
<div id="booking" class="hide" style="border: 1px solid #000000">Booking Form</div>
<div id="info" class="hide" style="border: 1px solid #000000">Enquiry Form</div>

Can anyone please get this to work for me?

Many, Many thanks,
Peter

[glenngv]

<script type="text/javascript">
function showHideDiv(objSel){
switch(objSel.options[objSel.selectedIndex].value){
case "": //hide divs
doForms('booking', 'hide');
doForms('info', 'hide');
break;
case "book":
doForms('booking', 'show');
doForms('info', 'hide');
break;
case "info":
doForms('booking', 'hide');
doForms('info', 'show');
break;
}
}
function doForms(id, newClass)
{
id=document.getElementById(id)
id.className=newClass;
}
</script><form name="selectsinging">
<SELECT onchange="showHideDiv(this)">
<OPTION value="" selected>Pick One</option>
<OPTION value="">----------</option>
<OPTION value="book">Booking A Lesson</option>
<OPTION value="info">Enquiring About A Lesson</option>
</select></form>
<div id="booking" class="hide" style="border: 1px solid #000000">Booking Form</div>
<div id="info" class="hide" style="border: 1px solid #000000">Enquiry Form</div>