多条件/禁用选择JS或JQuery?

According to this fiddle (http://jsfiddle.net/Qu44s/) I'm trying to have more conditions than just 2 select fields -> http://jsfiddle.net/tet8M/ but don't know how to do it. :(

根据这个小提琴(http://jsfiddle.net/Qu44s/)，我想要的条件比只有两个选择的字段要多——> http://jsfiddle.net/tet8M/但不知道如何去做。:(

For example:

例如:

Green -> XS -> Femal -> V-Neck, U-Neck

Blue -> S, M -> Male, Female -> V-Neck

Yellow -> L, XL -> unisex -> short-arms, long-arms

Sorry, I'm absolutly not fit in JS or JQ, but perhaps someone has an idea how to solve this.

对不起，我绝对不适合JS或JQ，但也许有人知道如何解决这个问题。

Thanks for any help!

感谢任何帮助!

1 个解决方案

#1

Simply extend what you have and disable the irrelevant options.

简单地扩展您所拥有的，并禁用无关的选项。

See DEMO.

看到演示。

var availableSizesForColors = {
    '2': ['6'],
    '3': ['7', '8'],
    '4': ['9', '10']
};

var availableGendersForColors = {
    '2': ['13'],
    '3': ['12', '13'],
    '4': ['14']
};

var availableExtrasForColors = {
    '2': ['18', '19'],
    '3': ['18'],
    '4': ['16', '17']
};

$('#color').change(function() {
    var availableSizes = availableSizesForColors[this.options[this.selectedIndex].value];
    var availableGenders = availableGendersForColors[this.options[this.selectedIndex].value];
    var availableExtras = availableExtrasForColors[this.options[this.selectedIndex].value];
    $('#size option').prop('disabled', function () { return $.inArray(this.value, availableSizes) == -1 });
    $('#sex option').prop('disabled', function () { return $.inArray(this.value, availableGenders) == -1 });
    $('#extra option').prop('disabled', function () { return $.inArray(this.value, availableExtras) == -1 });
});

Disable the rest of the form if color is not selected.

如果未选中颜色，则禁用其他窗体。

$('#color').change(function() {
    $('#size').val('5');
    $('#sex').val('11');
    $('#extra').val('15');
    if (this.options[this.selectedIndex].value == 1) {
        $('#size,#sex,#extra').attr("disabled", "disabled");
    } else {
        $('#size,#sex,#extra').removeAttr("disabled");
    }
});
$('#color').trigger('change');

#1