2

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

我想禁用/灰色与颜色选择相关的选项。每个选项都有独特的价值。

例如：

  • 衬衫（绿色）仅适用于 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>
4

3 回答 3

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);
    }
}
于 2013-01-21T16:15:15.033 回答
0

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

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

jsFiddle 演示

注意：如果您关心 jQuert$.inArray函数的性能，您可能希望使用不同的“数组包含”方法 - 请参阅如何检查数组是否包含 JavaScript 中的对象？

于 2013-01-21T16:39:45.863 回答
0

.onChange使用jQuery 中的函数和一个开关，这非常简单。

这是解决方案的一个小提琴。

于 2013-01-21T16:14:10.910 回答