简单的jQuery链式下拉问题

Question

我的网站上有以下代码摘录（也可作为jsFiddle）。这是根据选择显示不同数据的2个选择字段。我有2个错误。

1）当我选择US &然后Alaska，阿拉斯加div（ak）div不显示，因为我希望。

&

2）当我从Alaska搬回Choose a state...它再次显示一切（英国&美国），而不是诉诸回到刚才美国（us）股利。帮帮我？

CODE：

<form method="get" action="/" id="languageSwitch"> 
     <fieldset> 

      <select name='cat' id='cat' class='postform' > 
       <option value='0' selected='selected'>Choose a country&#8230;</option> 
       <option class="level-0" value="united-kingdom">United Kingdom</option> 
       <option class="level-0" value="us">US</option> 
      </select> 
      <script type="text/javascript"> 
       jQuery('#cat').change(function(){ 
        jQuery('#cat').change(function() { 
         jQuery("#statecat").toggle(jQuery(this).val() == "us"); 
        }); 

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

         } 
        }); 
      </script> 

     </fieldset> 
    </form> 

    <form method="get" action="/" id="stateSwitch"> 
     <fieldset> 

      <select name='statecat' id='statecat' class='postform' > 
       <option value='0' selected='selected'>Choose a state&#8230;</option> 
       <option class="level-0" value="ak">Alaska</option> 
       <option class="level-0" value="wy">Wyoming</option> 
      </select> 

      <script type="text/javascript"> 
       jQuery('#statecat').change(function(){ 
        if(jQuery('#statecat').val()=="0") 
        jQuery('form#stateSwitch').siblings('div').show(); 
         else{ 
         jQuery('form').siblings('div').hide(); 
         jQuery('.'+jQuery('#statecat').val()).show(); 

         } 
        }); 
      </script> 

     </fieldset> 
    </form> 

    <div class="united-kingdom"> 
     <h2>United Kingdom</h2> 
     <ul></ul> 
    </div> 

    <div class="us"> 
     <h2>US</h2> 
     <div class="ak"> 
     <h2>Alaska</h2><ul>     
      <li class="animal-listing" id="post-123"> 
       <a href="http://localhost:8888/test/wordpress/company/kiwi-kompany/">Alaska Test</a><br /> 
       Address:<br />Address<br /> 
       Country: Alaska<br /> 
       URL: http://www.somesite.co.nz<br /> 
       Telephone: 01902<br /> 
       Fax: 01293 
      </li> 

      <h2>Employees</h2> 

      <span>Me</span><br /><span></span><br /><span>(012)020-0202</span><br /><span>email@site.com</span><br /><img alt='' src='' class='avatar avatar-128 photo' height='128' width='128' /></ul></div> 

     <div class="as"> 
      <h2>American Samoa</h2> 
      <ul></ul> 
     </div> 

     <div class="wy"> 
      <h2>Wyoming</h2> 
      <ul></ul> 
     </div> 

     </ul></div> 

Answer 1

关于第一个错误，我建议你给一个类（state1）给每个状态;这使事情变得更容易。

然后，您可以试试这个：

 <script type="text/javascript"> 
      $('#statecat').change(function(){ 
       $('.state1').each(function(){$(this).hide(); }); 
       if($('#statecat').val()=="ak") 
        $('.ak').show(); 
      }); 
     </script> 

<div class="uk"> 
    <h2>United Kingdom</h2> 
    <ul></ul> 
</div> 

<div class="us"> 
    <h2>US</h2> 
    <div class="ak state1"> 
     <h2>Alaska</h2><ul> 
     ... 
    </div> 

    <div class="as state1"> 
     <h2>American Samoa</h2> 
     <ul></ul> 
    </div> 

    <div class="wy state1"> 
     <h2>Wyoming</h2> 
     <ul></ul> 
    </div> 

</div> 

由于Rhumborl指出它，也有你的代码中的许多问题。请注意，错误嵌套和/或封闭标签的HTML代码很可能会给您带来麻烦，即使它们在浏览器中正确显示。

出于这个原因，写任何CSS和Javascript代码之前，您应该验证您的HTML代码的HTML验证，如：http://validator.nu/