[英]javascript dependent drop down with doctrine form element
我正在尝试使用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函数无法正常工作。 我希望尽快找到答案。 谢谢
您的选择列表仅具有属性name="country"
和name="states"
并且没有相应的ID。 您这样搜索:
var s1 = $('#country');
var s2 = $('#states');
因此,您应该添加ids id="country"
和id="states"
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.