Bootstrap--multiselect
前台用ajax获取后台的值，显示到<select >控件中，再给<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 runat="server" multiple="multiple" ></asp:DropDownList>则在后台给控件赋值
如果是前端控件<select ></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&price);
}
}).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>
