javascript dependable drop down with doctrine form element

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" и без соответствующих идентификаторов. Вы ищете, как это:

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

Таким образом, вы должны добавить идентификаторы id="country" и id="states".