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. 效果图: