如何在JS / JQ的第一选择条件下隐藏第二选项

How to hide second option in condition of first selection with JS / JQ?

本文关键字：选择 条件下 隐藏 选项 JS JQ      更新时间：2023-09-26

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

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

例如:

  • 衬衫(绿色)只在XS有售。
  • 衬衫(蓝色)有S、m两种颜色可选
  • 衬衫(黄色)无L和XL款。

是否有可能使用"if"或数组函数?有代码被剪掉了吗?

感谢您的帮助，并为我不存在的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>

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);
    }
}

在jQuery中使用.onChange函数和开关非常简单。

假设您可以设置一个捕获有效颜色和大小的对象，然后您可以迭代所有<option>元素，根据选项的值是否在允许的大小集合中设置disabled属性。

var availableSizesForColors = {
    '2': ['6'],
    '3': ['7', '8'],
    '4': ['9', '10']
};
// bind the function to the JavaScript 'change' event
$('#color').change(function() { 
    // look up the available colours in the object above for the given value of the shirt colour drop down
    var availableSizes = availableSizesForColors[this.options[this.selectedIndex].value];
    // set disabled = true or false if the size option is or is not in the availableSizes array
    $('#size option').prop('disabled', function () { return $.inArray(this.value, availableSizes) == -1 });
});
<<p> jsFiddle演示/strong>

注意:如果你关心jQuert $.inArray函数的性能，你可能想使用不同的"数组包含"方法-参见我如何检查数组是否包含JavaScript中的对象?

相关文章：