JS組件中bootstrap multiselect兩大組件較量

更新時(shí)間：2016年01月26日 09:39:37 作者：懶得安分

這篇文章主要介紹了JS組件中bootstrap multiselect兩大組件，兩者之間的較量，優(yōu)缺點(diǎn)比較，感興趣的小伙伴們可以參考一下

兩個(gè)這種組件，大體樣式和功能基本相同，本文就來帶領(lǐng)大家看看這兩個(gè)組件的用法。

一、組件說明以及API
1、第一個(gè)組件——multiple-select。這個(gè)組件風(fēng)格簡單、文檔全、功能強(qiáng)大。但是覺得它選中的效果不太好。關(guān)于它的效果展示，我們放在后面。

2、第二個(gè)組件——bootstrap-multiselect。這個(gè)組件風(fēng)格和第一個(gè)非常相似，文檔也挺全面。

二、Multiple-select組件
1、組件說明
這個(gè)組件需要的瀏覽器支持如下：

IE 7+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+

還好，一般主流的瀏覽器都能夠支持。

2、效果預(yù)覽
（1）原始的MultiSelect

（2）初始化的Multiple Select

（3）設(shè)置選中和禁用

（4）設(shè)置分組

（5）設(shè)置未選中的初始值：請選擇

（6）初始化成單選

（7）設(shè)置組件的篩選功能

3、代碼示例
既然是bootstrap的組件，肯定需要bootstrap的支持。我們來看看需要引用的js

 @*Jquery*@
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>

 @*bootstrap*@
 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 @*multiple-select*@
 <script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
 <link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

 @*頁面js*@
 <script src="~/Scripts/Home/Index_wenzhixin.js"></script>

（1）原始的初始化

<label class="control-label col-xs-1" for="sel_search_orderstatus">多選站點(diǎn)</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
    <option value="0">未排產(chǎn)</option>
    <option value="5">已排產(chǎn)</option>
    <option value="10">已鎖定</option>
    <option value="25">在制</option>
    <option value="20">訂單提交</option>
    <option value="30">訂單刪除</option>
    <option value="50">訂單報(bào)廢</option>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus').multipleSelect();
})

（2）設(shè)置選中和禁用

<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus2').multipleSelect();
})

（3）設(shè)置分組和初始值

<label class="control-label col-xs-1" for="sel_search_orderstatus3">分組</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
    <optgroup label="未上線">
     <option value="0">未排產(chǎn)</option>
    </optgroup>
    <optgroup label="已上線">
     <option value="5">已排產(chǎn)</option>
     <option value="10">已鎖定</option>
     <option value="25">在制</option>
     <option value="20">訂單提交</option>
    </optgroup>
    <optgroup label="異常">
     <option value="30">訂單刪除</option>
     <option value="50">訂單報(bào)廢</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multipleSelect({
 placeholder: "請選擇"
 });
})

（4）單選

<label class="control-label col-xs-1" for="sel_search_orderstatus4">單選</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
    .......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus4').multipleSelect({
 placeholder: "請選擇",
 single: true
 });
})

（5）篩選

<label class="control-label col-xs-1" for="sel_search_orderstatus5">篩選</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus5').multipleSelect({
 placeholder: "請選擇",
 filter: true
 });
})

（6）如果你的multiple select不想要默認(rèn)的初始值，可以在初始化的時(shí)候去設(shè)置他們的值。如下是源碼里面的默認(rèn)參數(shù)列表。

三、Bootstrap-multiselect組件
1、代碼示例
初始化的過程和上面的類似，首先引用文件。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
 <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

 <script src="~/Scripts/Home/Index_davidstutz.js"></script>

（1）最原始的初始化

 <label class="control-label col-xs-1" for="sel_search_orderstatus">多選站點(diǎn)</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
    <option value="0">未排產(chǎn)</option>
    <option value="5">已排產(chǎn)</option>
    <option value="10">已鎖定</option>
    <option value="25">在制</option>
    <option value="20">訂單提交</option>
    <option value="30">訂單刪除</option>
    <option value="50">訂單報(bào)廢</option>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus').multiselect();
});

（2）設(shè)置選中和禁用

<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
    <option value="0">未排產(chǎn)</option>
    <option value="5" selected="selected">已排產(chǎn)</option>
    <option value="10" selected="selected">已鎖定</option>
    <option value="25" disabled="disabled">在制</option>
    <option value="20" disabled="disabled">訂單提交</option>
    <option value="30" disabled="disabled" selected="selected">訂單刪除</option>
    <option value="50">訂單報(bào)廢</option>
    </select>
   </div>

（3）分組

<label class="control-label col-xs-1" for="sel_search_orderstatus3">分組</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
    <optgroup label="未上線">
     <option value="0">未排產(chǎn)</option>
    </optgroup>
    <optgroup label="已上線">
     <option value="5">已排產(chǎn)</option>
     <option value="10" selected="selected">已鎖定</option>
     <option value="25" disabled="disabled">在制</option>
     <option value="20">訂單提交</option>
    </optgroup>
    <optgroup label="異常">
     <option value="30">訂單刪除</option>
     <option value="50">訂單報(bào)廢</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multiselect({
 enableCollapsibleOptGroups: true
 });
});

其他效果的代碼就不一一展示了，代碼很簡單，看看文檔基本沒啥問題。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是兩種多選組件的效果展示以及簡單的代碼示例。至于哪種更好全憑自己的感覺，使用起來都挺簡單，功能基本類似，希望這篇文章對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: