Question

请原谅新手代码，我是新的。当然，任何编码技巧都非常受欢迎。

以下是问题：

此代码似乎工作正常，如果我首先加载页面，选择USA并且状态可见。如果我然后选择另一个国家，那么州就会消失......

但是，如果我点击“刷新”按钮，状态将再次显示，但国家选择保持原样（不是美国）。

我怎样才能保护自己免受这种伤害？

#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;');
    }
});

我知道一个解决方法是将美国从“选定”改为其他类似通用的“请选择国家”。但我希望当90％的客户来自各州时，用户不需要选择美国的便利性。另外，我真的想解决一个问题，而不是一次解决它......

Answer 1

因为你的控制被包裹在点击事件中。刷新页面不是点击事件。

你需要使用你的控件有一个功能

function check_country()
{
   //your code above
}

并准备好进入文档

check_country();

单独

然后你必须将函数绑定到click事件

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

Answer 2

处理此问题的一种方法是使用jQuery.ready（）方法在页面加载时以及用户单击时执行您的函数。首先将代码拉入函数定义：

function update_states() {
   //state updating code goes here
}

然后添加以下代码以在加载或刷新页面时调用该函数：

$(function() {update_states();})

并按照您已经在做的更新时运行它：

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

这是否实现了您的目标？

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

2 个答案: