javascript - JS/JQ如何在第一次选择的情况下隐藏第二个选项？

Question

我遇到了以下问题，不知道如何解决。 :(

我想禁用/变灰与颜色选择相关的选项。每个选项都有唯一的值。

例如:

• 衬衫(绿色)仅提供 XS 码。
• 衬衫(蓝色)有 S 和 M 两种款式。
• 衬衫(黄色)没有 L 码和 XL 码。

是否可以使用“if”或数组函数之类的东西？!？! fiddle 上有代码吗？

感谢您的帮助，对我不具备的 JS 知识深表歉意!

<form id="test" name="test" method="post" action="">
        <label for="test"></label>
        <select name="color" id="color">
          <option value="1">---Select color---</option>
          <option value="2">T-Shirt - green</option>
          <option value="3">T-Shirt - blue</option>
          <option value="4">T-Shirt - yellow</option>
        </select>
    <br />
        <select name="size" id="size">
          <option value="5">---Select size---</option>
          <option value="6">XS</option>
          <option value="7">S</option>
          <option value="8">M</option>
          <option value="9">L</option>
          <option value="10">XL</option>
        </select>
    </form>

Answer 1

var sizes_avail = {
    '2': ['6'],
    '3': ['7', '8'],
    '4': ['9', '10']
};
$("#color").change(function() {
    var color = $(this).val();
    if (sizes_avail.hasOwnKey(color)) {
        $("#size option").attr("disabled", true);
        $.each(sizes_avail[color], function(i, size) {
            $("#size option["+size+"]").attr("disabled", false);
        }
    } else {
        $("#size option").attr("disabled", false);
    }
}