Multiple conditions / disable select options with JS or JQuery?

Question

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. :(

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.

Thanks for any help!

approach isn't how this is normally handled, you should chain selects so each one triggers available options of next select. Can you use actual option text as values? — charlietfl
– charlietfl, Commented Feb 4, 2013 at 0:52
In my case every select and every option value will have a unique ID as value... — Dataminer
– Dataminer, Commented Feb 4, 2013 at 1:24
different ID for Male Large vs unisex Large? data structure will depend on how unique ID's are if you want to chain the select tags. Also same question for extras different extras options for female vs male for example? — charlietfl
– charlietfl, Commented Feb 4, 2013 at 1:52

Antony · Accepted Answer · 2013-02-04 01:07:49Z

2

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

edited Feb 4, 2013 at 1:07

answered Feb 4, 2013 at 0:25

Antony

15.2k10 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dataminer Over a year ago

Wow! Looks locigal... But what happens if someone want to select "gender" first?

Collectives™ on Stack Overflow

Multiple conditions / disable select options with JS or JQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related