Bootstrapselect（selectpicker）的使用说明

官网api链接：http://silviomoreto.github.io/bootstrap-select/

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

"~/Content/bootstrap-select.css" rel="stylesheet" />

由于：例子中用使用的是jquery语法和bootstrap前端框架，所以还要引入

    "stylesheet" type="text/css" href="~/Content/bootstrap.css" />

注意：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)
                                        {
                                            
                                        }
                                    select>

View Code

3、属性说明

selected ="selected" option选中状态（全选则需在循环遍历时option时，加在该属性）

如：

 @foreach (var item in ViewBag.publishCodes)
  {
     
  }

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 ) {
            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 ) {
            v += texts[i].innerText + ",";
        }
}

//更简洁的获取值的写法：

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

第二种初始化方式：通过ajax获取到后台数据，回显加载selectpicker

 <select multiple class="selectpicker show-tick" color: rgba(128, 0, 0, 1)">"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 ) {
                //selected=\'selected\'  勾选选择项
                html += "";
            }
            $("#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("用户修改了项！");
});