bootstrap-select 使用总结

开发需要使用到多选，可搜索，满足这个条件的插件有select2 和 bootstrap-select 

开始发现seelct2 的效果更好就拿过来用了，但是，发现和bootstrap的兼容没有问题，就放弃了

下面说下bootstrap-selec使用注意事项和完整流程：

首先引入js和css文件：

下载地址：http://silviomoreto.github.io/bootstrap-select/

下载好后，只需要将dist 文件夹中的东西丢到项目中

jsp引入：

<link rel="stylesheet" href="${ctxPath}/你的webapp下的地址/css/bootstrap-select.min.css"/>

<script type="text/javascript" src="${ctxPath}/你的webapp下的地址/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="${ctxPath}/你的webapp下的地址/js/i18n/defaults-zh_CN.js"></script>

注意：

这里引入的文件一定要放在你对应的js文件的前面，加载顺序问题，要先加载插件，再去加载你的js文件，不然会有问题

jsp使用select

	<div class="form-group">
                <label for="list" class="col-lg-3 control-label">选择信息：</label>
                <div class="col-sm-8">
                    <select id="list" name="select" title="请选择信息"
                            class="selectpicker show-tick form-control" multiple data-live-search="false">
                    </select>
                </div>
            </div>

关键字 ： multiple  

--加这个表示可以选取多个内容

js文件 加载控件

$(function(){    

$(".selectpicker").selectpicker({
        dropuAuto : false,
        liveSearch : true //打开搜索功能
    });

});


ajax请求数据遍历：

 $.get... {
            var list = "";
            for(var i=0; i<resp.length; i++){
                list += '<option value='+resp[i].id+'>'+resp[i].name+'</option>';
            }
            $("#list").append(list);
            $("#list").selectpicker('refresh');//刷新到页面
        });

注意： 任何对select数据的操作都要在刷新数据之前操作 ，比如要给其绑定点击事件

	 $("#list").append(list);

        $('#list').on('change',
            function () {
                onSelectChange($(this).val());//具体操作的方法
            });

        $("#listPark").selectpicker('refresh');//最后刷新到页面


最后使用过程中，可能会有一些样式问题，需要调整，比如下拉框盖住了数据的显示等。。
这里只把我使用到的一些css分享一下，只作为参考
div#name{
        margin-left: 24%;
    }
    .radio label {
        padding-left: 30px;
    }
    .btn{
         white-space:normal;
    }
    .bootstrap-select :after{
        display:block;
        content:'';
        clear: both;
    }
    .dropdown-menu.open {
        position: relative;
        top: 0%;
    }
    div#upload_file {
        margin-top: 40px;
    }
    .datepicker {
        z-index: 9999;
    }
    div#form-group-no{
        margin-top: 33px;
    }