onChange and onSelect in DropDownList
I have a DropDownList that asks the user if he want to join the club:
Do you want to join the club
Yes
No
Under this list there is another list that is set to disabled as a default. This list has the departments of the club. This list will not be enabled until the user chooses Yes.
I built the following code but the problem that I couldn't solve is let's assume the user chooses Yes then he changes his decision so he will choose No again. In this case the list of the departments still enabled. I want it to be disabled when he chooses No again.
<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect1").disabled=true;
}
function enable()
{
document.getElementById("mySelect1").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect" onChange="enable();">
<option onSelect="disable();">No</option>
<option onSelect="enable();">Yes</option>
</select>
<select id="mySelect1" disabled="disabled" >
<option>Dep1</option>
<option>Dep2</option>
<option>Dep3</option>
<option>Dep4</option>
</select>
</form>
</body>
</html>
I thought that onSelect="disable();" would solve the problem but it still doesn't work.
Thanks
Answer
I'd do it like this jsFiddle example.
JavaScript:
function check(elem) {
document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}
HTML:
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<select id="mySelect1" disabled="disabled" >
<option>Dep1</option>
<option>Dep2</option>
<option>Dep3</option>
<option>Dep4</option>
</select>
</form>