HTML SELECT OPTION onChange - Please Help!

[discostudio]

Hi everyone,

I need some help.

<style type="text/css">
<!--
.hidden {
	position: relative;
	display: none;
	z-index:99; 
	visibility:hidden;
	}
-->
</style>

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility 	= iState ? "visible" : "hidden";
		obj.style.display 		= iState ? "block" : "none";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>

I am trying to use a drop-down select list to make a DIV visible and invisible based on the value selected.

<select name="account_type" class="general_form_input">
	<option value="0"  onmouseover="toggleBox('company_name',0);">Please Select</option>
	<option value="1"  onmouseover="toggleBox('company_name',0);">Personal / Sole Trader</option>
	<option value="2"  onmouseover="toggleBox('company_name',1);">Company</option>
</select>

Could someone please tell me which to use, or is this even possible?

I have tried:

onChange - This is only for use in th main SELECT tag
onClick - This doesn't work
onmousover
onmouseout

etc etc etc, none seem to work.

Please help?

[bradgrafelman]

Moved to ClientSide Technologies forum.

Yes, it's possible, but you'll have to do it a bit differently. What I'd do is use the onchange event handler on the SELECT box like so:

<select name="account_type" class="general_form_input" onchange="toggleBox('company_name', this.selectedIndex)">

Then, modify the beginning of your JS function a bit:

function toggleBox(szDivID, selectedValue)
{
    iState = (selectedValue==2) ? 1 : 0; // if option 2 is chosen, show it