Show/Hide issue with 2 select menus

Question

When I select 'US', I want my statecat dropdown to appear. Why isn't it currently doing this?

Many thanks for any help.

http://jsfiddle.net/3esurLwt/

HTML

<select name="cat" id="cat">
    <option value="uk">uk</option>
    <option value="us">us</option>
</select>

<select name="statecat" id="statecat">
    <option value="me">maine</option>
    <option value="ge">georgia</option>
</select>

Javascript

jQuery('#cat').change(function(){
if(jQuery('#cat').val()=="us")
    jQuery('form#stateSwitch').show();
else {
    jQuery('form#stateSwitch').hide();
})

if(jQuery('#cat').val()=="0")
jQuery('form#languageSwitch').siblings('div').show();
    else{
    jQuery('form').siblings('div').hide();
    jQuery('.'+jQuery('#cat').val()).show();

    }
});

Answer 1

You can simple use toggle:

 jQuery('#cat').change(function() { $("#statecat").toggle($(this).val() == "us"); }); 

 #statecat { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <select name="cat" id="cat"> <option value="uk">uk</option> <option value="us">us</option> </select> <select name="statecat" id="statecat"> <option value="me">maine</option> <option value="ge">georgia</option> </select> 

Reference

.toggle()