Question

I have 4 optgroup select menus that appear dependent on the value of the first select option. What I’d like to do is get the Value and load in the relevant matching select group. But obviously if a group has already been select hide the group and put the new select group in its place.

My jQuery code is :

$('#subcategory1, #subcategory2, #subcategory3, #subcategory4').hide();

// Hide Orientation Dropdown

$('#orientation').hide();

$('#category').change(function()
{
    $('#orientation').show();

    var CatValue = $("#category").val();

    if (CatValue == '1')
    {
        $("#subcategory1").show();
    }
    if (CatValue == '2')
    {
        $("#subcategory2").show();
    }
    if (CatValue == '3')
    {
        $("#subcategory3").show();
    }
    if(CatValue == '4')
    {
        $("#subcategory4").show();
    }
});

I am looking at a more logical way of writing this out. i.e hide previous subcategory selections etc.

Thanks in advance.

Answer 1

    switch(CatValue)
    {
        case "1": $("#subcategory1").show();
        break;
        case "2": $("#subcategory2").show(); 
        break;
    }

etc etc

switch basically allows you to make use of a massive if statement in a few lines of code 🙂