問題與jQuery Dropdown

Question

我有一個非常簡單的網站，有一個select菜單。

當我在下拉菜單中選擇USA時，會出現名爲State的輔助下拉菜單。

當我選擇Georgia它應該只顯示Georgia條目，但是，這是行不通的。 有人可以告訴我如何修復這個bug嗎？

演示：http://jsfiddle.net/28zwwwsw/

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

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

 
jQuery('#statecat').change(function() { 
 
    jQuery('.state1').hide(); 
 
    if(jQuery(this).val() == '0'){ 
 
     jQuery('.state1').show(); 
 
    }else{ 
 
     jQuery('.' + jQuery(this).val()).show(); 
 
    } 
 
    
 
}); 
 

 

 
jQuery("#countries_select select").change(function(){ 
 

 
    if(jQuery(this).val() == "usa"){ 
 
     jQuery("#state_select").show(); 
 
    } else { 
 
     jQuery("#state_select").hide(); 
 
    } 
 
    if(jQuery(this).val() == '0'){ 
 
      jQuery("ul.countries > li").show() 
 
    }else{ 
 
     jQuery("ul.countries > li").hide() 
 
     jQuery("ul.countries ." + jQuery(this).val()).css("display", "block")   
 
    } 
 
    
 
}) 
 

 

 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form method="get" action="/" id="countries_select"> 
 
<fieldset> 
 

 
\t <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="usa">USA</option> 
 
</select> 
 

 
</fieldset> 
 
</form> 
 

 
<form method="get" action="/" id="state_select" style="display:none;"> 
 
<fieldset> 
 

 
\t <select name='statecat' id='statecat' class='postform' > 
 
<option value='0' selected='selected'>Choose a state&#8230;</option> 
 
<option class="level-0" value="ga">Georgia</option> 
 
<option class="level-0" value="ny">New York</option> 
 
</select> 
 
\t 
 

 
</fieldset> 
 
</form> 
 

 
<ul class="countries"> 
 

 
<li class="usa"> 
 

 
<h2>USA</h2> 
 

 
<ul class="companies"> \t 
 

 
<li class="company-listing" id="post-1248"> 
 
\t 
 
\t <h4>New York Test</h4> 
 

 
\t <div class="row"> 
 
\t \t <div class="medium-6 columns"> 
 

 
      <dl class="company-data"> 
 
      \t <dt>Address:</dt> 
 
      \t <dd>New York Test</dd> 
 

 
      \t <dt>Country:</dt> 
 
      \t <dd> USA</dd> 
 

 
      \t <dt>URL:</dt> 
 
      \t <dd> <a href=""></a></dd> 
 

 
      \t <dt>Telephone:</dt> 
 
      \t <dd> </dd> 
 

 
      \t <dt>Fax:</dt> 
 
      \t <dd> \t \t \t \t \t \t \t    
 
      </dl> 
 

 
     </div> 
 

 
</li> 
 

 
    
 
<li class="company-listing" id="post-1247"> 
 
\t 
 
\t <h4>Georgia Test</h4> 
 

 
\t <div class="row"> 
 
\t \t <div class="medium-6 columns"> 
 

 
      <dl class="company-data"> 
 
      \t <dt>Address:</dt> 
 
      \t <dd>Georgia</dd> 
 

 
      \t <dt>Country:</dt> 
 
      \t <dd> USA</dd> 
 

 
      \t <dt>URL:</dt> 
 
      \t <dd> <a href=""></a></dd> 
 

 
      \t <dt>Telephone:</dt> 
 
      \t <dd> </dd> 
 

 
      \t <dt>Fax:</dt> 
 
      \t <dd> 
 
      </dl> 
 
     </div> 
 

 
</li> 
 

 
</ul> 
 

 
</li> 
 

 
</ul>

Answer 1

你可以試試這個：

<li class="company-listing" id="ny"> 
<li class="company-listing" id="ga"> 


jQuery('#statecat').change(function() { 
    jQuery('.company-listing').hide(); 
    jQuery('#' + jQuery(this).val()).show(); 
}); 

看看這個fiddle

Answer 2

jQuery('#statecat').change(function() { 
    alert(jQuery(this).val());// i have added this 
    jQuery('.state1').hide(); 
    if(jQuery(this).val() == '0'){ 
     jQuery('.state1').show(); 
    }else{ 
     jQuery('.' + jQuery(this).val()).show(); 
    } 

}); 



First of all when i alerted your code it shows value "ga" in the alert box. so the conditions you are matching might be wrong. 
Also class "state1" assigned nowhere in html. 

Answer 3

看起來你沒有關於所有元素的類。

但是你應該實現一些很容易添加的東西，而不必更改代碼。

隱藏當/顯示這個樣子，我覺得它的話最好做到以下幾點：

• 給可能隱藏/顯示同時具有class和ID的元素。
• 加載頁面時調用選擇的更改事件處理程序，以便相應地更新顯示。
• 國家選擇的更改事件處理程序應該觸發狀態選擇的更改事件，因此它會相應地隱藏/顯示元素。

縮小HTML：

<form method="get" action="/" id="country_select"> 
    <select name='cat' id='cat' class='postform'> 
     <option value='' selected='selected'>Choose a country&#8230;</option> 
     <option value="united-kingdom">United Kingdom</option> 
     <option value="usa">USA</option> 
    </select> 
</form> 
<form method="get" action="/" id="state_select" style="display:none;"> 
    <select name='statecat' id='statecat' class='postform'> 
     <option value='' selected='selected'>Choose a state&#8230;</option> 
     <option value="ga">Georgia</option> 
     <option value="ny">New York</option> 
    </select> 
</form> 
<ul id="countries"> 
    <li class="country" id="country-united-kingdom"> 
     <h2>UNITED KINGDOM</h2> 
    </li> 
    <li class="country" id="country-usa"> 
     <h2>USA</h2> 
     <ul id="states"> 
      <li class="state" id="state-ga">Georgia Test</li> 
      <li class="state" id="state-ny">New York Test</li> 
     </ul> 
    </li> 
</ul> 

的JavaScript：

jQuery('#cat').change(function() { 
    var val = jQuery(this).val(); 

    // Hide all countries 
    jQuery(".country").hide(); 

    // Show the selected country 
    if (val) { 
     jQuery("#country-" + val).show(); 
    } 

    // Show state select if usa 
    $('#state_select').toggle(val == 'usa'); 

    // Cause the states to hide/show 
    jQuery('#statecat').change(); 
}).change(); 

jQuery('#statecat').change(function() { 
    var val = jQuery(this).val(); 

    // Hide all states 
    jQuery(".state").hide(); 

    // Show the selected state 
    if (val) { 
     jQuery("#state-" + val).show(); 
    } 
}).change(); 

jsfiddle