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

1. 引入bootstrap-select的css，js   

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

2.  select的使用

（1）select选择框

<select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

（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.length; i++){
            options+="<option value='"+modelList[i].id+"'>"+modelList[i].componentName+"</option>";
                  }
                 $('#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<checkParam.length;i++) {
    checkId.push(checkParam[i].value);
}
var componentIdValue = checkId.join(',');

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

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

j.component_id in (${componentId})

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

<select class="selectpicker" multiple>
    <option selected="selected">Mustard</option>
    <option selected="selected">Ketchup</option>
    <option selected="selected">Relish</option>
</select>

（2）动态加载在第2部分中设置selected='selected'for(var i=0; i<modelList.length; i++){ options+="<option value='"+modelList[i].id+"' selected='selected'>"+modelList[i].componentName+"</option>";

 

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.length; i++){
            options+="<option value='"+modelList[i].id+"'>"+modelList[i].componentName+"</option>";
                  }

                 $('#componentId').append(options);
                var selectNumber = new Array();
                 for(var i=0;i<selectList.length;i++){
                  selectNumber.push(selectList[i].id);
                 }
                 alert(selectNumber);
                  $('#componentId').selectpicker('val',selectNumber);
                 $('#componentId').selectpicker('refresh');
				 $('#componentId').selectpicker('render');


        }
        }
        });