user6362236 user6362236 - 5 months ago 27
jQuery Question

active or disactive dropdown list based on another dropdown value

hi i have 3 drop down list in my contact form which i active or disactive two of them with first drop down list. till today my first drop down had two options and when i selected rent,it made price range disactive automatically and when i selected sell,it made rent range drop down disactive automatically. today i decided to add one more option to first drop down "presell" now i want to disactive rent range and active price range when i select this option too exactly like sell option. but i can not mange it. please help me? thank you



<html>
<body>
<p dir="rtl"><select id="select" name="case" style="width: 110px;">
<option selected="selected" value="red">sell</option>
<option value="green">rent</option>
<option value="blue">presell</option>
</select></p>
<p dir="rtl"><select name="pricerange" class="myclass1" style="width: 110px;" disabled="disabled">
<option value="" >please select</option>
<option value="1" >A</option>
<option value="2" >B</option>
<option value="3" >C</option>
</select></p>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
$('#select').change(function(){
$('.myclass1').attr('disabled',$(this).val() === 'green');
});
</script>
<p dir="rtl"><select name="rentrange" class="myclass2" style="width: 110px;" disabled="disabled">
<option value="" >please select</option>
<option value="4" >AA</option>
<option value="5" >BB</option>
<option value="6" >CC</option>
</select></p>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
$('#select').change(function(){
$('.myclass2').attr('disabled',$(this).val() === 'red');
});
</script>
</body>
</html>




Answer

Add another equation with 'or' operater (||) to the attribute condition.

<html>
  <head>
    <head>
      <body>
         <p dir="rtl"><select id="select" name="case" style="width: 110px;">
  <option  selected="selected" value="red">sell</option>
  <option  value="green">rent</option>
    <option  value="blue">presell</option>
</select></p>
         <p dir="rtl"><select name="pricerange" class="myclass1" style="width: 110px;" disabled="disabled">
<option value="" >please select</option>
<option value="1" >A</option>
<option value="2" >B</option>
<option value="3" >C</option>
</select></p>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script>
        $('#select').change(function(){
		$('.myclass1').attr('disabled',$(this).val() === 'green');
        });
    </script>
         <p dir="rtl"><select name="rentrange" class="myclass2" style="width: 110px;" disabled="disabled">
<option value="" >please select</option>
<option value="4" >AA</option>
<option value="5" >BB</option>
<option value="6" >CC</option>
</select></p>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script>
        $('#select').change(function(){
		$('.myclass2').attr('disabled',
                $(this).val() === 'red' || $(this).val() === 'blue' );
        });
    </script>
        </body>
      </html>