Question

我的网站上有以下代码摘录（也可作为jsFiddle提供）。它是2个选择字段，根据选择显示不同的数据。

我有 2个错误。

1）当我选择US＆amp;然后Alaska，阿拉斯加（ak）div没有按照我的希望展示。

＆安培;

2）当我从Alaska移回Choose a state...时，它再次显示所有内容（英国和美国），而不是仅回到美国（us）div。帮助

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/

简单的jQuery链式下拉问题

1 个答案: