c# 下拉多选的实现

1.首先是个TextBox

<asp:TextBox ID="txtREFERRINGDOC" Width="130" runat="server" CssClass="txt" onfocus="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" onmouseleave="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" onclick="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 = "▼";

}

}