c# 下拉多选的实现

1.首先是个TextBox

<asp:TextBox ID="txtREFERRINGDOC" Width="130" runat="server" CssClass="txt" οnfοcus="this.blur();"
onclick="showDiv('divREFERRINGDOC','txtREFERRINGDOC');">▼</asp:TextBox>

2.在TextBox上注册一个点击事件用来显示下拉框如下：

function showDiv(divID, txtID) {
var oSelect = document.getElementById(divID);
var oText = document.getElementById(txtID);
if (oSelect != null) {
var xy = divPosition(oText);
if (oSelect.style.display == "block") { oSelect.style.display = "none"; }
else if (oSelect.style.display == "none") {
oSelect.style.position = "absolute";
oSelect.style.left = xy.x + 1 + "px";
oSelect.style.top = (xy.y + document.getElementById(txtID).offsetHeight+3) + "px";
oSelect.style.display = "block";
}
} 
}

 

3.下拉多选框

<div id="divREFERRINGDOC" οnmοuseleave="javascript:showDiv('divREFERRINGDOC','txtREFERRINGDOC');"
style=" height: 300px; width:130px;background-color: #fff; display: none; z-index: 9998px; border-left: solid 1px #B6D3FB;
border-right: solid 1px #B6D3FB; border-bottom: solid 1px #B6D3FB;overflow-y: auto">
<!--防止div被select挡住-->
<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;
left: 0; scrolling: no;" frameborder="0"></iframe>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>

<asp:CheckBoxList Width="130px" οnclick="javascript:setTextValue(event,'cblREFERRINGDOC','txtREFERRINGDOC');"
CellPadding="0" CellSpacing="0" ID="cblREFERRINGDOC" runat="server">
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
</div>

 

4.给下拉多选框注册事件---把选中的值赋值给TextBox如下

function setTextValue(e, cblID, txtID) {
var o = document.getElementById(cblID);
var oText = document.getElementById(txtID);
var oinput = document.getElementsByTagName("input");
oText.value = oText.value.replace("▼", "");
var oTemp = oText.value;
var eID = e.srcElement.id;
if (eID == null || eID == "") { return; } //点空白
var oe = document.getElementById(eID);

//选中的全部选项
if (oe != null && oe.nextSibling.innerText == "全部") 
{
checkAll(oe, cblID, txtID);
return;
}
//选中
for (var i = 0; i < oinput.length; i++) {
var vid = oinput[i].id;
if (vid.indexOf(o.id) != -1 && vid == e.srcElement.id) {
var o1 = document.getElementById(vid);
if (o1.checked) {
if (oText.value.indexOf(o1.nextSibling.innerText) == -1) {
if (oText.value.length > 0) { oText.value += "," + o1.nextSibling.innerText; }
else { oText.value += o1.nextSibling.innerText; }
}
} else {
oTemp = oTemp + ",";
if (oText.value.indexOf(o1.nextSibling.innerText) != -1) { oText.value = oTemp.replace(o1.nextSibling.innerText + ",", ""); }
if (oText.value.length > 0) { oText.value = oText.value.substr(0, parseInt(oText.value.length) - 1); }
}
}
}
oText.value += "▼";
}

function checkAll(oAll, cblID, txtID) {
var o = document.getElementById(cblID); //医院列表 
var oText = document.getElementById(txtID); //医院名称 
var oinput = document.getElementsByTagName("input");
oText.value = oText.value.replace("▼", "");
var oTemp = oText.value;
for (var i = 0; i < oinput.length; i++) {

var vid = oinput[i].id;
if (vid.indexOf(o.id) != -1) {
var vid = oinput[i].id;
var o1 = document.getElementById(vid);
var o1Text = o1.nextSibling.innerText;
o1.checked = oAll.checked;
if (o1.checked && o1Text != "全部") {
if (oTemp.indexOf(o1Text) == -1) {
if (oTemp.length > 0) 
{
oTemp += "," + o1Text;
}

else {
oTemp += o1Text;
}
}
} else {
oTemp = oTemp + ",";
if (oTemp.indexOf(o1Text) != -1) {
oTemp = oTemp.replace(o1Text + ",", "");
}
if (oTemp.length > 0) {
oTemp = oTemp.substr(0, parseInt(oTemp.length) - 1);
}

}
}
}

if (oAll.checked == false) {
oTemp = "";
}
oText.value = oTemp + "▼";
}

 

5.后台CheckBox绑定扩展方法

/// <summary>
/// CheckBoxList绑定
/// </summary>
/// <param name="cbl"></param>
/// <param name="dt"></param>
/// <param name="TextFeildName"></param>
/// <param name="ValueFeildName"></param>
/// <param name="bNeedAll"></param>
public static void BindDataTable(this CheckBoxList cbl, DataTable dt, string TextFeildName, string ValueFeildName, bool bNeedAll, TextBox textbox)
{
if (dt == null) return;

cbl.DataSource = dt;
cbl.DataTextField = TextFeildName;
cbl.DataValueField = ValueFeildName; 
cbl.DataBind();

if (bNeedAll) { cbl.Items.Insert(0, new ListItem("全部", "All")); }

if (textbox != null)
{
textbox.Text = "▼";
}
}

 

 

转载于:https://www.cnblogs.com/sunlunhao/p/4569073.html