Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Disable Select</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// wait for drop down to change
$('#dropdown1').change(function() {
// if selected value = triggervalue
if ($('#dropdown1').val()==triggervalue) {
// reset second list.
// You do have empty values at index 0, right? :-)
$('#dropdown2').val(0);
$('#dropdown2').attr("disabled",true);
}else{
// remove disable - *only if it has it*
if ($('#dropdown2').attr('disabled')) {
$('#dropdown2').removeAttr('disabled');
}
}
});
// Assign the value to a global
var triggervalue = 'wuzzy';
});
</script>
</head>
<body>
<form action="" method="post">
<select name="dropdown1" id="dropdown1">
<option value="">Select</option>
<option value="fuzzy">Fuzzy</option>
<option value="wuzzy">Wuzzy</option>
<option value="wuzza">Wuzza</option>
<option value="bear">Bear</option>
</select>
<select name="dropdown2" id="dropdown2">
<option value="">Select</option>
<option value="fuzzy">Fuzzy</option>
<option value="wuzzy">Wuzzy</option>
<option value="hadno">Hadno</option>
<option value="hair">Hair</option>
</select>
</form>
</body>
</html>