Question

我正在使用“尺寸”选择和“颜色”选择的网站上工作。

举个例子

<select type="text" class="item_color item-dropdown">
 <option>blue</option>
 <option>red</option>
 <option>green</option>
</select>

<select type="text" class="item_size item-dropdown">
 <option>small</option>
 <option>medium</option>
 <option>large</option>
</select>

我希望如此，例如，如果选择了红色选项，则会禁用大小适中的大小等。

Answer 1

一种可能的解决方案可能是

<select type="text" class="item_color item-dropdown">
    <option>blue</option>
    <option>red</option>
    <option>green</option>
</select>
<select type="text" class="item_size item-dropdown"></select>

然后

var map = {
    blue: ['small', 'medium'],
    red: ['small'],
    green: ['large', 'medium']
}

$('.item_color').change(function () {
    var sizes = map[this.value];
    $('.item_size').html(function () {
        return $.map(sizes, function (val) {
            return '<option>' + val + '</option>';
        })
    });
}).change();

演示：Fiddle

两个选择，如果您在一个选项中选择一个选项，则禁用其他选项

1 个答案: