jQuery show / hide logic required
<p>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.</p>

<p>My jQuery code is :</p>

<pre><code>$('#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();
    }
});
</code></pre>

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

<p>Thanks in advance.</p>
