bootstrap-select基本用法（上篇）

bootstrap-select是结合bootstrap使用的一款功能十分强大的下拉框选择插件。可以实现单选、多选、查询、分组以及限制选择个数等多种功能。

单选功能

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-25  
            描述：基本选择  
        -->  
        <div class="form-group">  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">基本选择</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" id="singleSelect">  
            <option value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
        </select>  
        </div>  
        </div>

分组

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-25  
            描述：多选  
        -->  
        <div class="form-group">  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">分组</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" id="singleGroupSelect">  
            <optgroup label="水果">  
            <option value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
            </optgroup>  
            <optgroup label="蔬菜">  
                <option value="3">土豆</option>  
                <option value="4">芹菜</option>  
            </optgroup>  
        </select>  
        </div>  
        </div>

多选

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-25  
            描述：多选  
        -->  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">多选</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" id="multipleGroupSelect" multiple="true">  
            <optgroup label="水果">  
            <option value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
            </optgroup>  
            <optgroup label="蔬菜">  
                <option value="3">土豆</option>  
                <option value="4">芹菜</option>  
            </optgroup>  
        </select>  
        </div>  
        </div>

获取选中的值

//多选  
        $("#multipleGroupSelect").change(function(){  
            alert($("#multipleGroupSelect").val());  
        });

返回值是以,分隔的字符串

查询

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-26  
            描述：data-tokens设置查询关键字，例如下面的查询橘子，通过查询条件“查询橘子”可以查询到橘子  
        -->  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">查询</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" id="multipleGroupSelect" data-live-search="true" multiple="true">  
            <optgroup label="水果">  
            <option data-tokens="查询橘子" value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
            </optgroup>  
            <optgroup label="蔬菜">  
                <option value="3">土豆</option>  
                <option value="4">芹菜</option>  
            </optgroup>  
        </select>  
        </div>  
        </div>

设置最大选中数目

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-26  
            描述：设置最大选中条数  
        -->  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">设置最大选中条数</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true">  
            <optgroup label="水果">  
            <option data-tokens="查询橘子" value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
            </optgroup>  
            <optgroup label="蔬菜">  
                <option value="3">土豆</option>  
                <option value="4">芹菜</option>  
            </optgroup>  
        </select>  
        </div>  
        </div>

设置没有选中的显示内容

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-26  
            描述：设置没有选中项的默认值  
        -->  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">设置没有选中项的默认值</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" title="===请选择===" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true">  
            <optgroup label="水果">  
            <option data-tokens="查询橘子" value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
            </optgroup>  
            <optgroup label="蔬菜">  
                <option value="3">土豆</option>  
                <option value="4">芹菜</option>  
            </optgroup>  
        </select>  
        </div>  
        </div>

设置每一项的查询关键字

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-26  
            描述：通过设置option的title，设置每一个选中项选中后显示的内容  
        -->  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">设置没有选中项的默认值</span>  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" title="===请选择===" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true">  
            <optgroup label="水果">  
            <option data-tokens="查询橘子" value="0" title="你选择了橘子">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
            </optgroup>  
            <optgroup label="蔬菜">  
                <option value="3">土豆</option>  
                <option value="4">芹菜</option>  
            </optgroup>  
        </select>  
        </div>  
        </div>