JavaScript: onClick() not firing in Safari or Chrome

[jaypea07]

I'm trying to make a drop down menu that has three options, and when you click one of them it will toggle the visibility of three separate divs. (Where only one div will be visible at a time.)

What I have below works in Firefox, but nothing happens when the user selects another option in Safari or Chrome. Does anyone have any idea on how I can make this work across all browsers?




<script type="text/javascript">

function mensBasketball()
{
mens = document.getElementById("mens_canvas");
womens = document.getElementById("womens_canvas");
movin = document.getElementById("movin_canvas");

mens.style.visibility = 'visible';
womens.style.visibility = 'hidden';
movin.style.visibility = 'hidden';
}

function womensBasketball()
{
mens = document.getElementById("mens_canvas");
womens = document.getElementById("womens_canvas");
movin = document.getElementById("movin_canvas");

mens.style.visibility = 'hidden';
womens.style.visibility = 'visible';
movin.style.visibility = 'hidden';
}

function movinBasketball()
{
mens = document.getElementById("mens_canvas");
womens = document.getElementById("womens_canvas");
movin = document.getElementById("movin_canvas");

mens.style.visibility = 'hidden';
womens.style.visibility = 'hidden';
movin.style.visibility = 'visible';
}
</script>

--------------

<form>
<select>
<option value="mens" onClick="mensBasketball()">Men's Basketball</option>
<option value="womens" onClick="womensBasketball()">Women's Basketball</option>
<option value="movin" onClick="movinBasketball()">Movin' Mavs</option>
</select>
</form>