两次选择，如果您选择一个选项，则其他选项被禁用

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