bootstrap-select的使用（动态加载select，多选，全选，全不选，设置全选, 设置部分选中）

1. 引入bootstrap-select的css，js   

进入https://www.bootstrapselect.cn官网，下载bootstrap-select.min.css和bootstrap-select.min.js.同时引入bootstrap和juery

2.  select的使用

（1）select选择框

    Mustard
    Ketchup
    Relish

（2）动态加载select

$(document).ready(function() {

    var obj=document.getElementById('componentId');
       obj.options.length=0;

      $.ajax({
        url: "allComponent",
        method: "post",
        data: {},
        dataType: "json",
        success: function(data) {
        var modelList =data.rows;
        alert(modelList.length);

         if(modelList && modelList.length != 0){
               var options="";
                for(var i=0; i"+modelList[i].componentName+"";
                  }
                 $('#componentId').append(options);
                 $('#componentId').selectpicker('refresh');
				 $('#componentId').selectpicker('render');

        }
        }
        });
});

3.通过js控制样式

$("#componentId").selectpicker({
	 showTick: true,
	 liveSearch: true,
	 noneResultsText: "没找到相应记录{0}",
	 actionsBox: true,
	 //取消全选按钮标题
	 deselectAllText: "取消全选",
	 //全选按钮标题
	 selectAllText: "全选",
});

4. juery获取select选中的id

 var checkParam = $('#componentId').find('option:selected');
   var checkId = [];
   for (var i=0;i

5. 后台mapper中使用${}作为in的参数

之前使用#{}只获取第一个值的数据，改为${}获取正确

j.component_id in (${componentId})

6. 设置select全选（1）select设置如下

    Mustard
    Ketchup
    Relish

（2）动态加载在第2部分中设置selected='selected'for(var i=0; i"+modelList[i].componentName+"";

 

7. 动态设置部分选中

（1）后台将所有值放到rows中，将选中值放到select中

（2）前台先加载所有rows值，然后将选中的值放到Array的selectNumber中，使用$('#componentId').selectpicker('val',selectNumber);加载选中值。

全部代码如下：

  $.ajax({
        url: "getComponent",
        method: "post",
        data: {},
        dataType: "json",
        success: function(data) {
        var modelList =data.rows;
        var selectList =data.select;
         if(modelList && modelList.length != 0){
               var options="";
                for(var i=0; i"+modelList[i].componentName+"";
                  }

                 $('#componentId').append(options);
                var selectNumber = new Array();
                 for(var i=0;i