Bootstrap-select（selectpicker）的使用說明

官網api連結：http://silviomoreto.github.io/bootstrap-select/

1、首先引入selectpicker插件js，css

<link href="~/Content/bootstrap-select.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>      

由于：例子中用使用的是jquery文法和bootstrap前端架構，是以還要引入

<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
    <script type="text/javascript" src="~/Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>      

注意：jQuery.js引入時要在其他js檔案之前,否則js中無法識别jQuery文法

2、示例代碼：

<select id="codeMechineHouse" multiple class="selectpicker"
                                            data-none-selected-text="全部"
                                            data-live-search-placeholder="搜尋"
                                            data-live-search="true"
                                            data-none-Selected-Text="請選擇">
                                        @foreach (var item in ViewBag.mechineNameLists)
                                        {
                                            <option value="@item.SYSTEMID">@item.HOUSENAME</option>
                                        }
                                    </select>      

View Code

 3、屬性說明

selected ="selected"    option選中狀态（全選則需在循環周遊時option時，加在該屬性）

如：

@foreach (var item in ViewBag.publishCodes)
  {
     <option selected ="selected" value="@item.Type">@item.Name</option>
  }      

multiple:多選  （不加則為單選）

data-actions-box="true"：全選，false全不選

data-live-search="true"：查詢

data-none-selected-text="全部"：未選中時顯示

data-max-options="10"：最多可選條數

data-selected-text-format="count > 3"      顯示選擇項（多選的數量在三個以下，顯示文本，大于三個顯示：“選中{總數}的{選中數}項”）

如圖：

//清空selectpicker 清空選擇

$("#codeMechineHouse").val("").trigger("change")

//重新整理selectpicker

$(".selectpicker").selectpicker("refresh");

//擷取selectpicker的值(字元串輸出，逗号分隔)

第一種：

function getSelectpickerValue() {
    var v = "";
    //直接對selectpicker插件val(),隻能擷取到一個對象數組
    var values = $("#codeMechineHouse").val();
    if (values != null && values.length > 0) {

        for (var i = 0; i < values.length; i++) {
            v += values[i] + ",";
        }
    }
    return v;
}      

 第二種（簡潔版）：

//格式如："2,3,4"
$("#codeMechineHouse").val().toString(),      

//擷取selectpicker的文本(字元串輸出，逗号分隔)

function getSelectpickerText() {
        var v = "";
        var texts = $("#codeMechineHouse option:selected");
        for (var i = 0; i < texts.length; i++) {
            v += texts[i].innerText + ",";
        }
}      

//更簡潔的擷取值的寫法：

var selectedValues = [];
$(".selectpicker option:selected").each(function () {
    selectedValues.push($(this).val());
});      

第二種初始化方式：通過ajax擷取到背景資料，回顯加載selectpicker

<select multiple class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search="true" id="select_article" name="select_article">
    </select>      

$(\'.selectpicker\').selectpicker({
            noneSelectedText: \'請選擇\',
            liveSearch: true,
            size:5   //設定select高度，同時顯示5個值
});

$(window).on(\'load\', function () {
    var sid = $("#select_article").val();
    $(\'.selectpicker\').selectpicker(\'val\', \'\');
    $(\'.selectpicker\').selectpicker(\'refresh\');
    $.ajax({
        method:\'POST\',
        url:\'/Slider/GetOptionData\',
        dataType:\'json\',
        success: function (res) {
            var html="";
            console.log(res);
            for (var i = 0; i < res.content.length; i++) {
                //selected=\'selected\'  勾選選擇項
                html += "<option  value=\'" + res.content[i].tid + "\' selected=\'selected\' data-name=\'"+res.content[i].name+"\'>" + res.content[i].name + "</option>";
            }
            $("#select_article").html(html);
            $(\'.selectpicker\').selectpicker(\'refresh\');//加載select框選擇器
        }
    });
});      

效果圖：

第三種回顯的方式：

//将類似于"9,10,11"的字元串轉換為["9","10","13"]這樣的數組，回顯勾選上原來的選擇項
$("#add_senType").selectpicker(\'val\', data.sentype.split(","));      

 效果圖：

選擇改變事件：

$(\'#select_article\').on(\'changed.bs.select\', function (e, clickedIndex, isSelected, previousValue) {
if (isSelected == null) {
//控件初始化，頁面加載，不屬于使用者操作，不提示
return;
}
alert("使用者修改了項！");
});      

如圖：