CODEWITHSUNDEEP
javascriptjquery
dzags
dzags

Reputation: 3

How to disable a dropdown based on a previous dropdown?

Here is my current javascript: 

$('#blend1').change(function(e){
if($(this).val() == "5") || if($(this).val() == "6") || if($(this).val() == "7") || if($(this).val() == "8"){
 $("#gtype1 option[value='1']").prop('disabled',true);
 $("#gtype1 option[value='3']").prop('disabled',true);
}
else {
$("#gtype1 option[value='1']").prop('disabled',false);
$("#gtype1 option[value='3']").prop('disabled',false);
}
});

Can anyone tell me why this doesn't work? I'm trying to disable the values 1 and 3 in the second dropdown if options 5,6,7 or 8 are selected in the first dropdown.

Upvotes: 0

Views: 62

Answers (2)

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2825

Your syntax :

if($(this).val() == "5") || if($(this).val() == "6") || if($(this).val() == "7") || if($(this).val() == "8")

Correction : 

if($(this).val() == "5" || $(this).val() == "6" || $(this).val() == "7" ||$(this).val() == "8"){
    //do stuff
}

Upvotes: 2

Pimmol
Pimmol

Reputation: 1871

Your if / else statement is wrong.

It should be:

$('#blend1').on('change', function(e) {
    if ($(this).val() === '5' || $(this).val() === '6' || $(this).val() === '7' || $(this).val() === '8') {
        $("#gtype1 option[value='1']").attr('disabled',true);
        $("#gtype1 option[value='3']").attr('disabled',true);
    } else {
        $("#gtype1 option[value='1']").attr('disabled',false);
        $("#gtype1 option[value='3']").attr('disabled',false);
    }
});

Demo: https://jsfiddle.net/8n8ofrjo/1/

Edit Or: https://jsfiddle.net/8n8ofrjo/2/

Upvotes: 0

Related Questions