多次显示/隐藏jquery

Question

我的下面的代码显示了当从下拉菜单中选择匹配的国家时正确的城市/州div，但是如果用户决定选择另一个州，它不会隐藏前一个。我是否必须为每个想要隐藏的div创建一个if/else？

<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代码：

<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

取出state_label IDS ..
未使用的类state添加到state_CA，state_US等元素..

因此，每个国家组应

<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> 

，改变你的脚本是

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

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

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

Demo在​​

Answer 2

1. 你不能有相同ID的多个元素。您的标签state_Label不是唯一的。你应该改变这个，否则一些浏览器不会显示你的标签。
2. 隐藏所有具有css级“状态”的元素。但是这个阶级没有元素。我想你需要将class="state"加到你所有的state_* -divs。

Answer 3

事情是这样的逻辑可能会为你工作：

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; 
      } 
     }  
    });  
}); 

虽然它会更容易，如果他们都具有相同的CSS类，与你可以很容易隐藏和然后显示一个那是被选中的。