我有两个下拉菜单,第一个列出类似[--All-,Group1,Group2,Group3等]的值,第二个最初应列出默认的所有值。如果我们从第二个中选择组1,则应仅列出相关的那些值。我们如何在Jquery和html中实现这一点。这里没有数据库。
您可以尝试使用类似方法(使用data-
)
HTML:
<select id="groups">
<option value='--All--'>--All--</option>
<option value='Group1'>Group1</option>
<option value='Group2'>Group2</option>
<option value='Group3'>Group3</option>
</select>
<select id="sub_groups">
<option data-group='all' value='0'>--Select--</option>
<option data-group='Group1' value='one'>one</option>
<option data-group='Group1' value='two'>two</option>
<option data-group='Group2' value='three'>three</option>
<option data-group='Group2' value='four'>four</option>
<option data-group='Group3' value='five'>five</option>
<option data-group='Group3' value='Six'>six</option>
<select>
JS:
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
if(val == '--All--') {
$('#sub_groups').find('option').show();
}
else {
sub.find('option').not(':first').hide();
$('option', sub).filter(function(){
if($(this).attr('data-group') == val){
$(this).show();
}
});
}
sub.val(0);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句