Javascript 使用jQuery从另一个选择框的选定值显示和隐藏一个选择框的选项

我有两个选择框，一个叫做国家，另一个叫做州

下面是国家选择框的示例

<select name="Country" id=Country">
<option value="">Select Country</option>
<option value="AS">American Samoa</option>
<option value="AQ">Antarctica</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdon</option>
<option value="US">United States</option>
</select>

<select name="StateSelect" id="StateSelect">
<option value="">Select State</option>
<option class="us-states" value="AA">Armed Forces - Americas</option>
<option class="us-states" value="AE">Armed Forces - Europe</option>
<option class="us-states" value="AP">Armed Forces - Pacific</option>
<option class="us-states" value="AL">Alabama</option>
<option class="us-states" value="AK">Alaska</option>
<option class="us-states" value="AZ">Arizona</option>
<option class="ca-states" value="AB">Alberta</option>
<option class="ca-states" value="BC">British Columbia</option>
<option class="ca-states" value="MB">Manitoba</option>
<option class="ca-states" value="NB">New Brunswick</option>
<option class="ca-states" value="NF">Newfoundland</option>
</select>

我运行的是基于jQuery的小型javascript，如果选择的国家是CA，然后在States Select框中只显示加拿大省份的所有选项，其他国家只显示默认的美国州

这是示例状态选择框

<select name="Country" id=Country">
<option value="">Select Country</option>
<option value="AS">American Samoa</option>
<option value="AQ">Antarctica</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdon</option>
<option value="US">United States</option>
</select>

<select name="StateSelect" id="StateSelect">
<option value="">Select State</option>
<option class="us-states" value="AA">Armed Forces - Americas</option>
<option class="us-states" value="AE">Armed Forces - Europe</option>
<option class="us-states" value="AP">Armed Forces - Pacific</option>
<option class="us-states" value="AL">Alabama</option>
<option class="us-states" value="AK">Alaska</option>
<option class="us-states" value="AZ">Arizona</option>
<option class="ca-states" value="AB">Alberta</option>
<option class="ca-states" value="BC">British Columbia</option>
<option class="ca-states" value="MB">Manitoba</option>
<option class="ca-states" value="NB">New Brunswick</option>
<option class="ca-states" value="NF">Newfoundland</option>
</select>

这是我的剧本

<script type="text/javascript">
$(document).ready(function() { $("#Country").change(function () {
if($("#Country").val()=='CA'){
$(".us-states").css("display", "none");
$(".ca-states").css("display", "block");
} else {
$(".us-states").css("display", "block");
$(".ca-states").css("display", "none"); 
 }
});
</script>

问题是该脚本在FireFox中运行良好，但任何其他浏览器（如Chrome或IE）都无法运行，当我选择国家作为CA时，它只是不显示加拿大的省份

我错过了什么？感谢并感谢您的建议：

像这样尝试：

<script type="text/javascript">
$(document).ready(function() { 
$("#Country").change(function () {
    if($("#Country").val()=='CA'){
        $(".us-states").hide();
        $(".ca-states").show();
    } else {
        $(".us-states").show();
        $(".ca-states").hide(); 
    }
  });
});
</script>

---

然而原因是你错过了}；最后。您关闭了更改，但还没有准备好

在这里使用和工作正常，但您有一些打字错误。id=国家/地区缺少引号，您忘记用}结束.change函数；请看：谢谢大家，但当我选择CA时，在Chrome或IE中仍然不起作用。在Chrome和IE中，唯一显示select state的东西总是只显示美国各州。感谢您是否在chrome的开发者窗口F12中检查了控制台选项卡中的错误？是的，我同时检查了控制台选项卡和资源选项卡没有错误或警告谢谢各位，但在chrome或IE中仍然不工作，当我选择CA时，唯一显示select state的东西在chrome中没有其他显示，在IE中始终只显示美国州。谢谢如果你使用的是.css方法，试着去做吧！重要的是，它可能会起作用