doctrineフォーム要素でjavascriptに依存するドロップダウン

Question

javascript jqueryを使用してドロップダウンリストを作成しようとしています。 JavaScriptの機能が動作しない理由を私は把握カント

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

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

で次のように私は、HTML要素をレンダリングZendのframework2と教義と 。 私はすぐに答えを見つけることを望みます。ありがとう

Answer 1

選択リストには属性がname="country"とname="states"であり、対応するIDはありません。あなたがIDS id="country"とid="states"を追加する必要がありますので

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

：あなたのように検索します。