最近有一个需求下拉框实现多选和全选，参照前同事的代码琢磨了一番，很有意思，留在这里，学习参照，受益匪浅。
前台
<div class="t1">
<div class="txt">
车牌号码：</div>
<div class="input v_middle">
<asp:DropDownList ID="txtCarPlateNumber" name="txtCarPlateNumber" runat="server" CssClass="easyui-combobox"
Width="242px" Style="border: 1px solid #d7e0ea; border-radius: 5px; height: 40px;
line-height: 40px; padding-left: 15px;" data-options="
panelWidth: 242,
method:'get',
valueField:'Car_ID',
textField:'Car_PlateNumber',
multiple:true
">
</asp:DropDownList>
<asp:TextBox runat="server" ID="txtNodeIds" Width="0" ReadOnly="true" BorderWidth="0"></asp:TextBox>
</div>
</div>
全部由前台处理收发
$(function() {
$.ajax({
type: 'POST',
url: 'QueryMileageStatistics.aspx',
dataType: 'text',
data: { Action: 'ddlEquipIDonSelect'},
cache: false,
success: ddlEquipIDonSelectCallBack
});
$("#txtCarPlateNumber").combobox({
onChange: function(newValue, oldValue) {
//alert('新值' + newValue + ',旧值' + oldValue);
if (onChangeBreak == undefined) {
//alert(onChangeBreak);
}
else if (onChangeBreak) {
onChangeBreak = false;
} else {
var nowIsChooseAll = false;
for (var index = 0; index < newValue.length; index++) {
if (newValue[index] == "0") {
nowIsChooseAll = true;
}
}
if (nowChooseType == 1) {
if (!nowIsChooseAll) { //在原本全选的情况下取消全选
onChangeBreak = true;
$('#txtCarPlateNumber').combobox('setValue', "");
onChangeBreak = false;
// alert(onChangeBreak);
nowChooseType = 0;
} else { //在原本全选的情况下选择其他项目 取消全选按钮
for (var index = 0; index < newValue.length; index++) {
if (newValue[index] == "0") {
newValue.splice(index, 1);
break;
}
}
onChangeBreak = true;
$('#txtCarPlateNumber').combobox('setValues', newValue);
onChangeBreak = false;
nowChooseType = 0;
}
} else {
if (nowIsChooseAll) { //在原本取消全选的情况下选择全选
var strNodeIDs = "";
objNodeList.forEach(function(elment) {
strNodeIDs += elment.Car_ID + ",";
})
strNodeIDs = strNodeIDs.substr(0, strNodeIDs.length - 1);
onChangeBreak = true;
$('#txtCarPlateNumber').combobox('setValues', strNodeIDs.split(","));
onChangeBreak = false;
nowChooseType = 1;
} else { //在原本取消全选的情况下选择其他项目
for (var index = 0; index < newValue.length; index++) {
if (newValue[index] == "") { //筛选掉空值
newValue.splice(index, 1);
}
}
// alert(newValue.length + "+++++" + objNodeList.length);
if (newValue.length == objNodeList.length - 1) {
var strNew = "0";
newValue.push(strNew);
nowChooseType = 1;
} else {
nowChooseType = 0;
}
onChangeBreak = true;
$('#txtCarPlateNumber').combobox('setValues', newValue);
onChangeBreak = false;
// alert(onChangeBreak);
}
}
}
var NodeIds = $("#txtCarPlateNumber").combobox("getValues").join(',').split(",");
var strNewNodeIds = "";
for (var index = 0; index < NodeIds.length; index++) {
if (NodeIds[index] != "0" && NodeIds[index] != "") {
strNewNodeIds += NodeIds[index] + ",";
}
}
if (strNewNodeIds != "")
strNewNodeIds = strNewNodeIds.substr(0, strNewNodeIds.length - 1);
document.getElementById('txtNodeIds').value = strNewNodeIds;
}
});
})
var onChangeBreak;
var nowChooseType; //0未选择反选或全选 1全选
var objNodeList;
function ddlEquipIDonSelectCallBack(cars) {
if (cars!= "Empty") {
// var obj = JSON.parse(strs);
objNodeList = eval('(' + cars + ')');
objNodeList.unshift({ "Car_ID": "0", "Car_PlateNumber": "全选" });
onChangeBreak = true;
$("#txtCarPlateNumber").combobox("clear");
onChangeBreak = true;
$("#txtCarPlateNumber").combobox({
data: objNodeList
});
nowChooseType = 1;
if (objNodeList != null && objNodeList.length > 0) {
var strNodeIDs = "";
objNodeList.forEach(function(elment) {
strNodeIDs += elment.Car_ID + ",";
})
if (strNodeIDs != "") {
strNodeIDs = strNodeIDs.substr(0, strNodeIDs.length - 1);
onChangeBreak = true;
$('#txtCarPlateNumber').combobox('setValues', strNodeIDs.split(','));
}
}
}
}
BLL层取回数据tojson
case "ddlEquipIDonSelect":
strNodeIDValues = "";//清空
returnMsg = ddlEquipIDonSelect();
Response.Write(returnMsg);
break;
private string ddlEquipIDonSelect()
{
DataTable dtNodeInfor = _QueryMileageStatisticsBLL.GetDDLBindNodeInfor();
string strResult = CommonHelper.ToJson(dtNodeInfor);
return strResult;
}
end，关于这个实现的网上参照不多，互相学习。
补充 修复一个严重的bug
strNodeIDs = strNodeIDs.substr(0, strNodeIDs.length - 1);
