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

Question

我有2个选择框，一个叫做“国家”，另一个叫“美国”

这是国家选择框的示例

<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>

我正在运行基于jQuery的小型javascript，如果所选国家为CA，然后在“州选择”框中仅显示加拿大各省的所有选项，否则对于其他任何国家，仅显示默认的美国州

这是示例状态选择框

<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时，它不会显示加拿大的省份。

我想念什么？ 感谢并感谢任何建议:)

Answer 1

像这样尝试：

<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>

但是，原因是您错过了}）； 在末尾。 您关闭了变更但未准备就绪