Bootstrap--multiselect

 前台用ajax获取后台的值,显示到<select id="slcPriceNo">控件中,再给<select>控件加上.multiselect()属性,如果数据源不是唯一,

则每次要重新加载<option>中的内容,要给加上rebuild,,$("#slcPriceNo").multiselect('rebuild');

 首先:

在<head>中引入插件 <link href="../assets/global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css" rel="stylesheet" />

前端控件:如果是服务器控件<asp:DropDownList ID="ddlCommonFCName" runat="server" multiple="multiple" ></asp:DropDownList>则在后台给控件赋值

              如果是前端控件<select id="slcPriceNo"></select>则在前端用ajax获取数据源给添加<option>赋值


<script>

$.ajax({
url: agenturl,
type: 'POST',
data: {
'act': 'getPriceNobyFcid',
'fcid': fcid
},
dataType: 'json',
async: false,
success: function (msg) {

//给前端<select>赋值
$("#slcPriceNo").empty();
$("#slcPriceNo").append("<option value='0'>请选择</option>");
var data = msg.data;
for (var i = 0; i < data.length; i++) {
$("#slcPriceNo").append("<option value='" + data[i].Id + "'>" + data[i].PricingNo + "_" + data[i].FCName + "</option>");
}

//初始化multiselect控件

$("#slcPriceNo").multiselect({
buttonWidth: '100%',
enableFiltering: true,
maxHeight: 200,
onChange: function (option, checked, select) {

var priceId = $(option).val();
var priceNo = $("#slcPriceNo").find("option:selected").text();
$("#hipriceid").val(priceId);
$("#spPriceView").html("<a href="../Cus/Pricing.aspx?fa=10&priceid=" + priceId + "" target="_blank">" + priceNo + "</a>");

}

}).multiselect('rebuild'); //若数据源要变换,则加上rebuild
}, error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});

如果想此控件多选,则要给<select>加上multiple='multiple'的属性

得到多选的值,onchange:中加

onChange: function (option, checked, select) {

var selected = [];
$("#ddlCommonFCName").each(function () {
selected.push($(this).val());
});
$("#hiCommonFcanme").val(selected);

}

不在onchange中的

var contracts=[];
$("#slcContracts :selected").each(function(i,selected){
contracts.push($(selected).val());
});

给多选下拉框赋值:

var groupNameList = $("#hiCommonFcanme").val().split(',');
for (var j = 0; j < groupNameList.length; j++) {
// alert(groupNameList[j]);
// 设置选中项
$("#ddlCommonFCName option[value='" + groupNameList[j] + "'] ").attr("selected", true);
}

 </script>

原文地址:https://www.cnblogs.com/liuruiyun/p/6548422.html