在更改另一个下拉选项时隐藏下拉选项

Question

I have tried this, but not working fine. HTML:

 <div>
 <select id="color" name="color" onchange="myFunction()">                
    <option value=""> choose options </option>                
    <option value="1">AB</option>
    <option value="2">ABC</option>
    <option value="3">ABCD</option>
</select>
<select id="size" name="size" >             
    <option value=""> choose options </option>
    <option value="3" class="27">Apple </option>
    <option value="2" class="26">Orange</option>
    <option value="2" class="26">Orange</option>
    <option value="2" class="26">Orange</option>
    <option value="3" class="28">Grapes</option>
</select>
</div>

SCRIPT:

function myFunction()
{
   $variable=$("#size").html();
   $("#size").html($variable); 
   var val=$("#color").find(":selected").val();
   $("#size option[value!="+val+"]").remove();
}

in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?

Answer 1

You can make a mix of JS and CSS.

So we "reset" the size select, by removing all the disabled and also the selected .

Something like this:

 $(document).ready(function () { var colors = $('#color'), size = $('#size'); colors.change(function () { var val = $(this).find(":selected").val(); size.find('option').removeAttr('disabled'); size.find('option:selected').removeAttr('selected'); size.find("option[value!=" + val + "]").attr('disabled', 'disabled'); }) }) 

 option:disabled { display: none; } option:first-child { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select id="color" name="color"> <option value="">choose options</option> <option value="1">AB</option> <option value="2">ABC</option> <option value="3">ABCD</option> </select> <select id="size" name="size"> <option value="">choose options</option> <option value="3" class="27">Apple</option> <option value="2" class="26">Orange</option> <option value="2" class="26">Orange</option> <option value="2" class="26">Orange</option> <option value="3" class="28">Grapes</option> </select> </div> 

Edit 1:

Using data-group instead of class or value

 $(document).ready(function () { var colors = $('#color'), size = $('#size'); colors.change(function () { var val = $(this).find(":selected").attr('data-group'); size.find('option').removeAttr('disabled'); size.find('option:selected').removeAttr('selected'); size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled'); }) }) 

 option:disabled { display: none; } option:first-child { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select id="color" name="color"> <option value="">choose options</option> <option value="1" data-group="1">AB</option> <option value="2" data-group="2">ABC</option> <option value="3" data-group="3">ABCD</option> </select> <select id="size" name="size"> <option value="">choose options</option> <option value="3" class="27" data-group="3">Apple</option> <option value="2" class="26" data-group="2">Orange</option> <option value="2" class="26" data-group="2">Orange</option> <option value="2" class="26" data-group="2">Orange</option> <option value="3" class="28" data-group="3">Grapes</option> </select> </div> 

Answer 2

You should show all options before hide.

 function myFunction() { $variable=$("#size").html(); $("#size").html($variable); var val=$("#color").find(":selected").val(); $("#size option").show(); $("#size option[value!="+val+"]").hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <select id="color" name="color" onchange="myFunction()"> <option value=""> choose options </option> <option value="1">AB</option> <option value="2">ABC</option> <option value="3">ABCD</option> </select> <select id="size" name="size" > <option value=""> choose options </option> <option value="3" class="27">Apple </option> <option value="2" class="26">Orange</option> <option value="2" class="26">Orange</option> <option value="2" class="26">Orange</option> <option value="3" class="28">Grapes</option> </select> </div>