簡單的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/