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. 백그라운드 체크박스 바인딩 확장 방법

/// <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 = "▼";

}

}