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