我遇到如下问题,不知道如何解决。(
我想禁用与颜色选择相关的/灰化选项。每个选项都有一个唯一的值。
例如:- 衬衫(绿色)只在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中的对象?