jQuery - 检查刷新时的选择值？

Question

请原谅新手代码，我是新手。当然，我们也非常感谢任何编码技巧。

问题来了:

这段代码似乎工作正常，如果我第一次加载页面，美国被选中并且国家是可见的。如果我随后选择另一个国家/地区，这些州将按应有的方式消失...

但是，如果我随后点击刷新按钮，状态将再次可见，但国家选择保持不变(不是美国)。

我怎样才能保护自己免受这种情况的影响？

#stateWrapper { display: block; }

#country USA is set to "selected"

$('#country').click(function(){
    var selectedValue = $("select").val();

    if(selectedValue == 'US') {
        $('#stateWrapper').attr('style', 'display: block;');            
    }else{
        $('#stateWrapper').attr('style', 'display: none;');
    }

    if(selectedValue == 'CA') {
        $('#provinceWrapper').attr('style', 'display: block;');         
    }else{
        $('#provinceWrapper').attr('style', 'display: none;');
    }
});

我知道一种解决方法是将 USA 从“已选择”更改为其他通用名称，例如“请选择国家/地区”。但我更喜欢用户不需要选择美国的便利，因为 90% 的客户都来自各州。另外，我真的很想解决一个问题，而不是一次解决它...

Answer 1

因为您的控件包含在点击事件中。刷新页面不是点击事件。

你需要使用你的控件有一个函数

function check_country()
{
   //your code above
}

然后进入准备调用的文档

check_country();

单独然后你必须将函数绑定(bind)到点击事件

$('#country').click(function(){check_country();}

所以现在你的控制函数在页面加载和点击时都有效

最后你应该有这样的东西:

function check_country()
{
    var selectedValue = $("select").val();

    if(selectedValue == 'US') {
        $('#stateWrapper').attr('style', 'display: block;');            
    }else{
        $('#stateWrapper').attr('style', 'display: none;');
    }

    if(selectedValue == 'CA') {
        $('#provinceWrapper').attr('style', 'display: block;');         
    }else{
        $('#provinceWrapper').attr('style', 'display: none;');
    }
}

$(document).ready(function()
{
   check_country();
   $('#country').click(function(){check_country();});
});