Click here to Skip to main content
15,887,746 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have three drop-down lists connected with each other and as shown in example
drop down lists
these lists are working properly but i want to disable remaining lists until i select any item from parent list.
Posted

1 solution

Try jQuery:
XML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#cars').change(function(){
        $('#colors').prop('disabled', $(this).val() === '');
    }).change();
});
</script>
</head>
<body>

<form action="">

<select name="cars" id="cars">
<option value="">Select one...</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<select name="colors" id="colors">
<option value="">Select one...</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
<option value="silver">Silver</option>
<option value="blue">Blue</option>
</select>
</form>

</body>
</html>
 
Share this answer
 
Comments
Vivek_Maruxxxx 31-May-14 4:19am    
what can we do if we want to completely disappear the second drop-down until we select any option from first

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900