不久之前我试图在bootstrap-select lib上编写一个小片段,它应该打开并隐藏一些关于父选项的点击/更改事件的额外选项(在底部示例中为一半).
它应该如何工作......
当用户单击特定选项时,一些包含更多附加信息的额外项目将显示在父项下方.当用户再次单击时,应隐藏额外的项目,并从已选择的选项中清除子项目.
问题是什么？
不幸的是我的jquery水平并不高,所以在这一刻我只有/显示/功能没有/隐藏/子项和清除选中(如果选择了一些隐藏父项的子项).如果父项目上的选中箭头不显示,那么将会很好,仅限于孩子.
我的例子
这是我的简短代码 -
$('.remove-example').find('.hider').hide();
$('.selectpicker').change(function() {
var feta = $(this).find("option:selected:first").attr('id');
var feta1 = $(this).find("option:selected:last").attr('id');
$('.remove-example').find('.' + feta).show();
$('.remove-example').find('.' + feta1).show();
$('.remove-example').selectpicker('refresh');
});
$('.rm-mustard').click(function() {
$('.remove-example').find('.Mustard').hide();
$('.remove-example').selectpicker('refresh');
});
$('.rm-mustard1').click(function() {
$('.remove-example').find('.Mustard').show();
$('.remove-example').selectpicker('refresh');
});
$('.selectpicker').selectpicker();.btn-primary {
padding: 0px 74px;
margin-top: 5px;
}
#tastes {
margin: 15px 0px 0px 15px;
}
.padd {
margin-left:20px;
}
}<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<select class="selectpicker remove-example" multiple>
<option id="Mustard" value="">Mustard</option>
<option …