Question

我有两个选择框，一个叫做国家和其他被叫状态

这里是国家选择框的样本

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

但原因是你错过了}）;在末尾。您已关闭更改但尚未就绪

使用jQuery显示并隐藏另一个选择框中所选值的一个选择框的选项

1 个答案: