下拉菜單插件bootstrap-selected 的簡單應用

1因為這是一個基於bootstrap的插件 所以需要引入如下文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>

注意：bootstrap-select文件 要在bootstrap后面引入

沒有文件的 可以再這里下載  網盤：鏈接: https://pan.baidu.com/s/1eTIFdQU 密碼: c7ui

html代碼：

<div class="col-sm-6 col-sm-offset-3" style="margin-top: 200px;">
    <div class="row">
        <label class="col-sm-3 control-label" style="line-height: 34px;margin-bottom: 20px;">選擇用戶：</label>
        <div class="col-sm-6">
            <select id="select" name="select" class="selectpicker show-tick form-control" multiple data-live-search="true" data-actions-box="true">
            　　<option value="蘋果">蘋果</option>
            　　<option value="菠蘿">菠蘿</option>
            　　<option value="香蕉">香蕉</option>
            　　<option value="火龍果">火龍果</option>
            　　<option value="梨子">梨子</option>
            　　<option value="草莓">草莓</option>    
            　　<option value="哈密瓜">哈密瓜</option>
            　　<option value="椰子">椰子</option>
            　　<option value="獼猴桃">獼猴桃</option>
            　　<option value="桃子">桃子</option>
            </select>
        </div>
    </div>
</div>                                    

js代碼：

$(window).on('load', function () {
     $('.selectpicker').selectpicker();
        
});

這樣就可以了 效果是這樣的 ：

 

這是英文的 如果想要中文的 只需要引入一個js：

<script src="js/defaults-zh_CN.min.js"></script>

在我上面的網盤文件里 都有 加了之后 效果是這樣的：

現在咱們說一下 select標簽 上的類和屬性的作用：

　　1、show-tick  會在你選擇的每個選項后面 打一個 對號

　　2、form-control 就是bootstrap的樣式 沒什么用

　　3、屬性 multiple 毫無疑問 就是多選的意思

　　4、屬性 data-live-search="true"  一看到search 沒錯 就是下面那個搜索框 

　　5、屬性 data-actions-box="true" 全選，取消全選

以上這幾個類和屬性添加就有 不加就沒有。

* 獲取選中的值 更簡單：

$("#select").val();

如果你想動態渲染select  我寫了一段js：

// res是從后端返回的數據 
var res = {
　　account_arr:[
         '蘋果',
         '柿子',
         '香蕉',
         '橙子',
         '草莓',
         '桃子',
         '菠蘿',
         '火龍果']
        }
 var str = "";
 //res.account_arr是你從接口接收到的那個數組
 for (var i = 0; i < res.account_arr.length; i++){
     str += '<option value="'+ res.account_arr[i] +'">'+ res.account_arr[i] +'</option>'
 }
 $(".selectpicker").html(str);
 $('.selectpicker').selectpicker('refresh');//動態刷新

幫一個朋友弄得 只用到了這些 基本上可以滿足一般的需求，需要更多的話，請看 http://silviomoreto.github.io/bootstrap-select/