问题描述
我有两个下拉菜单,第一个列出像[--All--,Group1,Group2,Group3等]的值,第二个默认列出所有值。如果我们从第二组中选择组1,应只列出那些相关的值。我们如何在Jquery& html .. no database here。
您可以尝试(使用 data -
)
HTML:
< select id =groups>
< 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'> - 选择 - < / 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:
('change',function(){
var val = $(this).val();
$('#groups')。 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);
});
I have Two Dropdowns, The First one lists values like [--All--, Group1, Group2, Group3, etc] and the second one initially should list all values by default. If we select Group 1 from the second should list only those values related. How do we achive that in Jquery & html.. no database here.
You may try something like this (using 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);
});
这篇关于jquery根据第一个下拉菜单显示/排序第二个下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!