Show/Hide Dropdown Option Depend on Another Dropdown Selection

Question

What i'm trying , I want to show Second drop-down option based on First Dropdown Selection-

 $(document).ready(function(){ $("#type").change(function(){ $(this).find("option:selected").each(function(){ if($(this).attr("value")=="1"){ $("#grouping_type option[value=" + 1 + "]").hide(); $("#grouping_type option[value=" + 3 + "]").hide(); $("#grouping_type option[value=" + 4 + "]").hide(); } else{ $("#grouping_type option[value=" + 1 + "]").show(); $("#grouping_type option[value=" + 3 + "]").show(); $("#grouping_type option[value=" + 4 + "]").show(); } if($(this).attr("value")=="2"){ $("#grouping_type option[value=" + 1 + "]").hide(); $("#grouping_type option[value=" + 5 + "]").hide(); } else{ $("#grouping_type option[value=" + 1 + "]").show(); $("#grouping_type option[value=" + 5 + "]").show(); } if($(this).attr("value")=="3"){ $("#grouping_type option[value=" + 2 + "]").hide(); $("#grouping_type option[value=" + 3 + "]").hide(); $("#grouping_type option[value=" + 4 + "]").hide(); $("#grouping_type option[value=" + 5 + "]").hide(); } else{ $("#grouping_type option[value=" + 2 + "]").show(); $("#grouping_type option[value=" + 3 + "]").show(); $("#grouping_type option[value=" + 4 + "]").show(); $("#grouping_type option[value=" + 5 + "]").show(); } }); }).change(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="type"> <option value="none">Select Any One</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> <br> Dependable Dropdown Show/Hide <br> <select id="grouping_type"> <option value="none">Select Group Type</option> <option value="1">group_1</option> <option value="2">group_2</option> <option value="3">group_3</option> <option value="4">group_4</option> <option value="5">group_5</option> </select> 

But it does not work , it's doing strange behavior.

Can anyone please help?

Answer 1

Actually your nested if-else combination is wrong. let check, if I am selecting "one" from type combo. the first if condition where you check value == "1" will hide the option but again,

second if check send back to else statement and its again set display property block and so on.

you can just show set display:block(.show()) for all options before condition check and then set display:none(.hide()) for specific options.

i updated your code . here is

$(document).ready(function(){
    $("#type").change(function(){
        $(this).find("option:selected").each(function(){
             $("#grouping_type option[value=" + 1 + "]").show();
             $("#grouping_type option[value=" + 2 + "]").show();
             $("#grouping_type option[value=" + 3 + "]").show();
             $("#grouping_type option[value=" + 4 + "]").show();
             $("#grouping_type option[value=" + 5 + "]").show();
            if($(this).attr("value")=="1"){
                $("#grouping_type option[value=" + 1 + "]").hide();
                $("#grouping_type option[value=" + 3 + "]").hide();
                $("#grouping_type option[value=" + 4 + "]").hide(); 
            }
            else if($(this).attr("value")=="2"){
                $("#grouping_type option[value=" + 1 + "]").hide();
                $("#grouping_type option[value=" + 5 + "]").hide(); 
            }
            else if($(this).attr("value")=="3"){
                $("#grouping_type  option[value=" + 2 + "]").hide();
                $("#grouping_type  option[value=" + 3 + "]").hide();
                $("#grouping_type  option[value=" + 4 + "]").hide();
                $("#grouping_type  option[value=" + 5 + "]").hide();
            }
        });
    }).change();
});

Answer 2

First suggestion: keep different select boxes itself and hide and show based on the selection, The reason for this is options may not be hide and show in different browsers

Second suggestion: use option group, may be help full to show and hide particular category things.

Answer 3

You can try this-

 $(document).ready(function() { $("#type").change(function () { $("#grouping_type").children("option").show(); $("#grouping_type option[value='"+ $('#type').val() +"']").hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="type"> <option value="none">Select Any One</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> <br> Dependable Dropdown Show/Hide <br> <select id="grouping_type"> <option value="none">Select Group Type</option> <option value="1">group_1</option> <option value="2">group_2</option> <option value="3">group_3</option> <option value="4">group_4</option> <option value="5">group_5</option> </select> 

I think, u have your complete answer :) .