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

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>

SCRIPT：

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

代替.remove（）我试过.hide（）似乎没有用。任何人都可以帮我解决这个问题吗？

Answer 1

你可以混合使用JS和CSS。

我们通过移除所有disabled和selected来“重置”尺寸选择。

这样的事情：

$(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>

编辑1：

使用data-group代替class或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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;