使用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顯示和隱藏選項

回答

相關問題