簡單的鏈式選擇菜單錯誤

Question

我有一個簡單的jQuery選擇菜單，根據選擇顯示內容。

這是我的jsFiddle &我的代碼如下。

錯誤＃1：當我最初選擇US時，State下拉列表不出現。在此之前，我必須先選擇UK，然後再選擇US。爲什麼？

錯誤＃2：現在，我使用的是： if(jQuery('#statecat').val()=="ak") jQuery('.ak').show(); }); - 有沒有更有效的方式來做到這一點，所以我沒有對所有50個州這樣做呢？

錯誤＃3：當我從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(){ 
        jQuery('.state1').each(function(){jQuery(this).hide(); }); 
        if(jQuery('#statecat').val()=="ak") 
         jQuery('.ak').show(); 
       }); 
      </script> 

     </fieldset> 
    </form> 

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

    <div class="us"> 
     <h2>US</h2> 
     <div class="ak state1"> 
      <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> 
     </div> 

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

    </div> 

Answer 1

的而不會出現在第一選擇是因爲某種原因，你已經嵌套change()處理程序的「狀態」下拉列表中，那麼該事件沒有被解僱，直到第二的第一個問題選擇了。

$('.' + $('#statecat').val()).show(); 

我還包括了一些改進你的代碼，如：

其次，你可以爲國家的顯示DIV從下拉列表中的值來選擇這樣的串聯選擇縮短你的代碼去除不必要的循環和緩存選擇：

$('#cat').change(function() { 
    var val = $(this).val(); 
    $("#statecat").toggle(val == "us"); 

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

$('#statecat').change(function() { 
    $('.state1').hide(); 
    $('.' + $(this).val()).show(); 
}); 

Updated Fiddle