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

您不能拥有多个具有相同ID的元素。您的标签state_Label不是唯一的。您应该更改此设置，否则某些浏览器将不会显示您的标签。
隐藏所有具有css-class“state”的元素。但是没有这个类的元素。我想您需要将class="state"添加到所有state_* - div。

Answer 2

像这样的逻辑可能对你有用：

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类会更容易，您可以轻松隐藏它们，然后然后显示已选择的那个。

Answer 3

删除state_label ID ..
将未使用的课程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>

演示 http://jsfiddle.net/gaby/PYx2v/

多个显示/隐藏jquery

3 个答案: