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

我已经尝试过了，但是不能正常工作。 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（），这似乎不起作用。有人可以帮我这个忙吗？

最佳答案

您可以混合使用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>