多个显示/隐藏jQuery

Question

My code below is showing the proper city/state div's when the matching country is selected from the drop down, but it's not hiding the previous one if the user decides to select another state. Do I have to create an if/else each for each div i want to hide?

<script type="text/javascript">
$(document).ready(function() {
...
//city & state display 

   $("#ctry").change(function() {
      $(".state").hide();

      var stateSelect = $("#state_" + $(this).val());

      if (stateSelect.length === 0)
         $("#state_label").hide(); 
      else {
         $("#state_label").show();
         stateSelect.show();
      }       
   });     
});
</script>

html code:

    <label>Country/Locale:</label>
        <select id="ctry" name="country">
        <option value="">-- Select</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="GB">United Kingdom</option>        
        <option value="AU">Australia</option>       
        </select><br /> 

<!-- US -->        
    <div id="state_US" style="display:none">
    <label id="state_label" style="display:none">State:</label>
    <span class="rstate">
        <select name="u_state">
        <option value="">-- State US</option>
        <option value="AL">Alabama</option>
        </select>
    </span>
    &nbsp;&nbsp;Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
    </div>

<!-- CA -->   
    <div id="state_CA" style="display:none">
    <label id="state_label" style="display:none">Province:</label>
    <span class="rstate">
        <select name="c_state">
        <option value="">-- Prov CA</option>
        <option value="ON">Windsor</option>
        </select>
    </span>
    &nbsp;&nbsp;Postal or Place:<input style="margin-left:43px;" type="text" name="locca" id="locca" size="30" />
    </div>

<!-- GB -->
    <div id="state_GB" style="display:none">
        <label id="state_label" style="display:none">City or Region:</label>
        <span class="rstate">
            <select name="k_state">
            <option value="">-- Place</option>
            <option value="AU">UK!</option>
            </select>
        </span>
    </div>

<!-- AU -->
    <div id="state_AU" style="display:none">
        <label id="state_label" style="display:none">City or Region:</label>
        <span class="rstate">
            <select name="a_state">
            <option value="">-- Place</option>
            <option value="AU">UK!</option>
            </select>
        </span>
    </div>

Answer 1

1. You cannot have multiple elements with the same ID. Your label state_Label is not unique. You should change this, otherwise some browsers will not show your label.
2. You hide all elements having the css-class "state". But there is no element having this class. I guess that you need to add class="state" to all of your state_* -divs.

Answer 2

Something like this logic might work for you:

var previous;
$(document).ready(function() {    
    $("#ctry").change(function() {
        $(".state").hide();

        var stateSelect = $("#state_" + $(this).val());

        if (stateSelect.length === 0) {
            $("#state_label").hide(); 
        } else {
            if (previous) {
                previous.hide(function() {
                    $("#state_label").show();
                    stateSelect.show();
                    previous = stateSelect;
                });
            } else {
                $("#state_label").show();
                stateSelect.show();
                previous = stateSelect;
            }
        }       
   });     
});

Though it would be easier if they all had the same CSS class, with which you could easily hide them and then show the one that was selected.

Answer 3

Remove the state_label ids..
Add the unused class state to the state_CA , state_US etc. elements..

So each state group should be

<div id="state_US" class="state" style="display:none">
<label style="display:none">State:</label>
<span class="rstate">
    <select name="u_state">
    <option value="">-- State US</option>
    <option value="AL">Alabama</option>
    </select>
</span>
&nbsp;&nbsp;Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>

And change your script to be

<script type="text/javascript">
$(document).ready(function() {
...
//city & state display 

   $("#ctry").change(function() {
      $(".state").hide();

      var stateSelect = $("#state_" + $(this).val());
      stateSelect.show();      
   });     
});
</script>

Demo at http://jsfiddle.net/gaby/PYx2v/