bootstrap-select基本用法（下篇）

设置选中值的格式

通过count属性，设置显示内容为选中项的数目

<!--  
            作者：iamlisen@163.com  
            时间：2017-07-25  
            描述：设置选中内容展示格式  
        -->  
        <div class="form-group">  
        <div class="panel-heading">  
            <span class="glyphicon glyphicon-search">显示选中数目</span>  
            <!--  
                作者：iamlisen@163.com  
                时间：2017-07-26  
                描述：如果选中了一条，显示选中的内容，如果选中多条，显示选中条数  
            -->  
        </div>  
        <div class="panel-body">  
            <select class="selectpicker" multiple="true" data-selected-text-format="count">  
            <option value="0">橘子</option>  
            <option value="1">苹果</option>  
            <option value="2">香蕉</option>  
        </select>  
        </div>  
        </div>

设置显示内容为选中项的内容

<div class="form-group">  
<div class="panel-heading">  
    <span class="glyphicon glyphicon-search">显示选中项的内容</span>  
</div>  
<div class="panel-body">  
    <select class="selectpicker" multiple="true" data-selected-text-format="value">  
    <option value="0">橘子</option>  
    <option value="1">苹果</option>  
    <option value="2">香蕉</option>  
</select>  
</div>  
</div>

设置由显示选中项的值到显示条数到改变

<div class="form-group">  
<div class="panel-heading">  
    <span class="glyphicon glyphicon-search">count > x</span>  
    <!--  
            作者：iamlisen@163.com  
            时间：2017-07-26  
            描述：当选中条数大于设置的x值时，由显示选中项的内容，变为显示条数  
          -->  
</div>  
<div class="panel-body">  
    <select class="selectpicker" multiple="true" data-selected-text-format="count>3">  
    <option value="0">橘子</option>  
    <option value="1">苹果</option>  
    <option value="2">香蕉</option>  
    <option value="3">芒果</option>  
</select>  
</div>  
</div>

设置显示静态内容

<div class="form-group">  
<div class="panel-heading">  
    <span class="glyphicon glyphicon-search">只显示默认title</span>  
    <!--  
            作者：iamlisen@163.com  
            时间：2017-07-26  
            描述：内容不跟随选中项发生改变  
          -->  
</div>  
<div class="panel-body">  
    <select class="selectpicker" multiple="true" data-selected-text-format="static" title="我不会改变">  
    <option value="0">橘子</option>  
    <option value="1">苹果</option>  
    <option value="2">香蕉</option>  
    <option value="3">芒果</option>  
</select>  
</div>  
</div>

设置全选/全不选按钮

<div class="form-group">  
            <div class="panel-heading">  
                <span class="glyphicon glyphicon-search">只显示默认title</span>  
            </div>  
            <div class="panel-body">  
                <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true">  
                    <option value="0" class="special">橘子</option>  
                    <option value="1" style="color: #008000;">苹果</option>  
                    <option value="2" data-icon="glyphicon-heart">香蕉</option>  
                    <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option>  
                </select>  
            </div>  
        </div>

设置分割线

<div class="form-group">  
            <div class="panel-heading">  
                <span class="glyphicon glyphicon-search">设置分割线</span>  
            </div>  
            <div class="panel-body">  
                <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true">  
                    <option value="0" class="special">橘子</option>  
                    <option value="1" style="color: #008000;">苹果</option>  
                    <option data-divider="true"></option>  
                    <option value="2" data-icon="glyphicon-heart">香蕉</option>  
                    <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option>  
                </select>  
            </div>  
        </div>

设置选择项不可用

<div class="form-group">  
            <div class="panel-heading">  
                <span class="glyphicon glyphicon-search">设置选择项是否可用</span>  
            </div>  
            <div class="panel-body">  
                <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true">  
                    <option value="0" class="special" disabled>橘子</option>  
                    <option value="1" style="color: #008000;">苹果</option>  
                    <option data-divider="true"></option>  
                    <option value="2" data-icon="glyphicon-heart">香蕉</option>  
                    <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option>  
                </select>  
            </div>  
        </div>