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

Question

我已经尝试过这个，但效果不佳。 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>

脚本:

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

代替 .remove() 我尝试了 .hide() ，它似乎不起作用。谁能帮我解决这个问题吗？

Answer 1

您应该在隐藏之前显示所有选项。

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>