目录

内容参考

插件下载地址：https://developer.snapappointments.com/bootstrap-select/

演示示例地址：https://developer.snapappointments.com/bootstrap-select/examples/

参数详解地址：https://developer.snapappointments.com/bootstrap-select/options/

事件方法地址：https://developer.snapappointments.com/bootstrap-select/methods/

插件效果示例

分组下拉框带搜索

不带搜索的

带全选

使用方法

组件是依赖bootstrap的，而bootstrap是依赖jquery的，使用组件必须引用如下文件。
<link href="../BootStrap/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/bootstrap-select.min.css" rel="stylesheet" />
<script src="../scripts/jquery-1.10.2.min.js"></script>
<script src="../BootStrap/assets/js/bootstrap.min.js"></script>
<script src="../scripts/bootstrap-select.min.js"></script>

HTML代码

**使用方法1**，不用任何js，直接使用class就可以初始化。
<select class="selectpicker">
    <option value="1">test1</option>
    <option value="2">test2</option>          
</select>

**使用方法2**，使用js渲染
<select Id="selectpicker">
    <option value="1">test1</option>
    <option value="2">test2</option>          
</select>

$(function(){
	$("#selectpicker").selectpicker();
})

其他效果

1. 多选添加 multiple

<select class="selectpicker" multiple>
    <option value="1">test1</option>
    <option value="2">test2</option>          
</select>

2. 添加搜索组件 data-live-search="true"

<select class="selectpicker" data-live-search="true" multiple>
    <option value="1">test1</option>
    <option value="2">test2</option>          
</select>

3. 添加分组 <optgroup label="分组1">

<select class="selectpicker" data-live-search="true" multiple>
<optgroup label="分组1">
            <option value="1">test1</option>
    		<option value="2">test2</option>     
</optgroup>   
</select>

4. 最多选中项 data-max-options="3" 最多3个

<select class="selectpicker" data-live-search="true" multiple data-max-options="3">
<optgroup label="分组1">
            <option value="1">test1</option>
    		<option value="2">test2</option>     
</optgroup>   
</select>

5. 缩略显示，data-selected-text-format="count > 3"选中项大于3个只显示选中个数，只对多选生效

 <select class="selectpicker" data-live-search="true" multiple data-selected-text-format="count > 3>
<optgroup label="分组1">
            <option value="1">test1</option>
    		<option value="2">test2</option>     
</optgroup>   
</select>

Ajsx后台获取数据

 $.ajax({
   
                type: "Get",
                url: "../Handlers/InfomHandler.ashx?action=GetUser",
                success: function (msg) {
   
                    var date = $.parseJSON(msg);
                    var existDep = [];
                    var arr = new Array();
                    for (var i = 0; i < date.length; i++) {
   
                        arr.push(date[i]["DepName"]);
                    }
                    for (var i = 0; i < arr.length; i++) {
   
                        if (existDep.indexOf(arr[i]) == -1) {
   
                            existDep.push(arr[i]);
                        }
                    }
                    for (var i = 0; i < existDep.length; i++) {
   
                        $("#sel").append('<optgroup label="' + existDep[i] + '">' + existDep[i] + '</optgroup>');
                        for (var j = 0; j < date.length; j++) {
   
                            if (existDep[i] == date[j]["DepName"]) {
   
                                $("#sel optgroup[label=" + existDep[i] + "]").append('<option value=' + date[j]["UserID"] + '>' + date[j]["UserName"] + "(" + date[j]["RoleName"] + ")" + '</option>');
                            }
                        }
                    }

                    $("#sel").selectpicker('refresh'); //这两个很重要，没有的话后台加载了但是不显示
                    $("#sel").selectpicker('render');//还有这个
                }
            });