Bootstrap 实现下拉多选框插件
下拉多选框 使用:
1. 引入文件:
<link href="assets/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assets/scripts/plugin/bootstrap-select.js"></script>
<script type="text/javascript" src="assets/scripts/plugin/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-1.10.2.min.js"></script>
2. jsp页面
<div class="input-group">
<span style="float:left;margin-left:10px;margin-top:28px;">是否显示部门:</span>
<input type ="checkbox" style="float:left;margin-top:24px;margin-left:28px;zoom:130%;" id="sfshowbm" />
</div>
<div class="input-group" style="display:none;" id="bmxzlshow">
<span id ="bmsz" style="float:left;margin-left:10px;margin-top:24px;font-size:16px;">部门设置:</span>
</div>
3. Js代码:
//增加操作栏function addRecord (xmzl){
$("#myadd").modal("show");
$("#mybtadd").text("请进行增加的操作").css("font-weight","bold");
$(window).on('load', function () {
$('#bmselect').selectpicker({
'selectedText': 'cat'
});
});
//显示设置部门
$("#sfshowbm").change(function() {
if($("#sfshowbm").prop("checked") == true){
$("#bmxzlshow").show();
}else{
$("#bmxzlshow").hide();
}
// 获取jqxtree数据
var bmlist = getData("getBmxxList.action");
var bmxxlist = bmlist.bmxx;
$("#bmsz").append(
"<select id='bmselect' class='selectpicker show-tick from-control' multiple data-live-search='false' style='float:left;margin-top:24px;margin-left:28px;zoom:130%;'>"
);
for(var i=0; i<bmxxlist.length; i++){
$("#bmselect").append(
"<option value='"+i+"'>"+bmlist.bmxx[i].bmmc+"</option>"+
"</option></select>"
);
$("#bmselect").selectpicker('refresh');
$("#bmselect").selectpicker('render'); //数据不显示,查看这两句是否加上;
}
});
}
4. 效果图: