前台用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>
