使用jQuery显示和隐藏选项

我有2个选择框的一个被称为国家和另一种称为美国使用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>

我运行基于jQuery的，如果选择的国家是CA，然后在美国选择框只显示加拿大各省的选项，其他明智的任何其他国家只显示默认的美国国家

这里小型的JavaScript是样本美国选择框

<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它只是不显示加拿大省份。

我错过了什么？感谢和欣赏任何意见:)

来源

2014-03-27 niceoneishere

使用http://api.jquery.com/show/和http://api.jquery.com/hide –

在此处可以正常工作，但您做出了一些错字。 id =“Country”缺少一个引号，并且你忘记了用}）结束你的.change（）函数。请参阅：http://jsfiddle.net/sLWmj/ – Jop

感谢球员，但仍然无法在Chrome或IE浏览器中工作，当我选择CA时，唯一显示选择状态的内容只在Chrome中显示，IE中总是显示美国状态。谢谢 – niceoneishere

试试这样说：

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

但原因是你已经错过了}）;最后。您关闭了更改但未准备就绪

来源

2014-03-27 15:10:03

感谢球员，但仍然不能在Chrome或IE浏览器中工作，当我选择CA时，唯一的事情就是在Chrome中显示选择状态，而IE中只显示美国状态。谢谢 – niceoneishere

如果您使用.css方法，请尝试使它们变得重要，它可能会起作用 –

使用jQuery显示和隐藏选项

回答

相关问题