我有以下要求:
根据层次结构(父子关系)显示下拉列表。
每个节点都应该是可检查的(每个选项中都有一个复选框)
如果我们选择所有子节点,那么应该检查父节点 自动或反之亦然。
例如: 在下拉列表中,我想要这样的东西:
[Checkbox]Element 1
[Checkbox]Element 1.1
[Checkbox]Element 1.2
[Checkbox]Element 1.2.1
[Checkbox]Element 1.2.2
[Checkbox]Element 2
[Checkbox]Element 2.1
[Checkbox]Element 2.2
[Checkbox]Element 2.2.1
[Checkbox]Element 2.2.2
请提出任何解决方案或是否有可用的插件。 future 可能会超过4-5级。
提前致谢。
最佳答案
我制作了伪代码。希望对您有所帮助。
HTML-
<div class="parent">
<input type="checkbox">1
<div>
<input type="checkbox">1.1
<input type="checkbox">1.2
<div>
<input type="checkbox">1.2.1
<div>
<input type="checkbox">1.2.1.1
<input type="checkbox">1.2.1.2
<input type="checkbox">1.2.1.3
</div>
<input type="checkbox">1.2.2
</div>
</div>
<input type="checkbox">2
<div>
<input type="checkbox">2.1
<input type="checkbox">2.2
</div>
</div>
Jquery-
$('input').change(function(){
var status = false;
$(this).next().find('input').prop('checked', this.checked);
status = ($(this).parent().find('> input').not(':checked').length === 0);
$(this).parent().prev().prop('checked', status);
if(status){
$(this).parent().prev().trigger("change");
}
else{
$(this).parents().prev().prop('checked', false);
}
});
关于javascript - 多选分层下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37832261/