javascript - 简单链式选择菜单错误

Question

我有一个简单的 jQuery 选择菜单，它根据选择显示内容。

这是我的 jsFiddle &我的代码在下面。

错误 #1:当我最初选择 US 时，State 下拉列表不会出现。我必须先选择 UK，然后再选择 US，然后才能开始。为什么？

错误 #2:现在，我正在使用:if(jQuery('#statecat').val()=="ak")
jQuery('.ak').show();
}); - 有没有更有效的方法来做到这一点，所以我不必对所有 50 个州都这样做？

错误 #3:当我从 Alaska 返回到 Choose a State... 时，US 结果为空白。为什么？

非常感谢您对此提供的任何帮助。

代码

<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() 处理程序，因此直到第二次选择时才触发该事件制作。

其次，您可以通过连接从下拉列表值中选择的状态显示 div 的选择器来缩短代码，如下所示:

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

我还对您的代码进行了一些改进，例如删除不必要的循环和缓存选择器:

$('#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