JavaScript依賴下降與教條形式元素

Question

我試圖做一個下拉列表使用JavaScript的jquery。 與Zend framework2和學說我呈現的HTML內容如下：

<div>   
Country<select name="country"><option value="">--select Country-</option> 
<option value="1" class="country" id="country">Greater Accra</option> 
<option value="2" class="country" id="country">Ashanti</option> 
<option value="3" class="country" id="country">Central</option> 
<option value="4" class="country" id="country">Eastern</option></select>   
</div> 

<div>  
States<select name="states"><option value="">--select States--</option> 
<option value="1" class="states" id="states" data-id="1">Roman  Ridge</option> 
<option value="2" class="states" id="states" data-id="2">Kumasi</option> 
<option value="3" class="states" id="states" data-id="3">Cape Coast</option> 
<option value="4" class="states" id="states" data-id="4">Koforidua</option> 
<option value="5" class="states" id="states" data-id="1">Accra</option> 
<option value="6" class="states" id="states" data-id="3">Moree</option> 
<option value="7" class="states" id="states" data-id="1">Chantan</option> 
<option value="8" class="states" id="states" data-id="1">Achimota</option> 
<option value="9" class="states" id="states" data-id="2">Mampong</option> 
<option value="10" class="states" id="states" data-id="1">Lapaz</option></select>   
</div> 

，這是我的jQuery機能的研究

<script> 
$(document).ready(function(){ 

var s1 = $('#country'); 
var s2 = $('#states'); 

var dependantOptions = s2.find('option'); 
dependantOptions.css('visibility', 'hidden'); 

s1.on('change', function() { 
dependantOptions.css('visibility', 'hidden'); 
s2.find("option[data-id='" + $(this).val() + "']").css('visibility',  'visible'); 
}); 

}); 
</script> 

我無法弄清楚，爲什麼javascript函數無法正常工作。 我希望能很快找到答案。謝謝

Answer 1

您的選擇列表只有屬性name="country"和name="states"，沒有相應的ID。您搜索這樣的：

var s1 = $('#country'); 
var s2 = $('#states'); 

所以，你應該添加IDS id="country"和id="states"。