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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM