javascript - jQuery 下拉菜单问题

Question

我有一个非常简单的网站，有一个选择菜单。

当我在下拉列表中选择USA时，会出现一个名为State的辅助下拉列表。

当我选择Georgia时，它应该只显示Georgia条目，但是，这不起作用。 有人可以告诉我如何修复这个错误吗？

演示: 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>

	<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>

	<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>
	

</fieldset>
</form>

<ul class="countries">

<li class="usa">

<h2>USA</h2>

<ul class="companies">	

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

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

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

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

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

            	<dt>Telephone:</dt>
            	<dd> </dd>

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

        </div>

</li>

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

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

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

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

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

            	<dt>Telephone:</dt>
            	<dd> </dd>

            	<dt>Fax:</dt>
            	<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