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