Forum Moderators: open

Message Too Old, No Replies

Jquery Select Problem

         

wingnut

8:15 am on Apr 5, 2011 (gmt 0)

10+ Year Member



I am trying to disable a drop down when a value is selected from another drop down using Jquery. However I cannot seem to be able to select the correct value to trigger the attribute addition.

This code disables the drop down whatever is selected!

$(document).ready(function() {
// wait for drop down to change
$('select#dropdown1').change(function() {
// if selected value = triggervalue
if ($('select#dropdown1 option:selected:contains(triggervalue)')) {
$('#dropdown2').attr("disabled",true);
}else{
// remove disable
$('#dropdow2').removeAttr("disabled");
}
});

});

TIA

Andrew

rocknbil

4:57 pm on Apr 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First you're missing an "n" in dropdown2 - but I don't think that's the problem. Not sure exactly what it is, but here's another working approach. :-)


<!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>

wingnut

7:50 am on Apr 6, 2011 (gmt 0)

10+ Year Member



Thanks, much appreciated.