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 = "▼"; } }
时间: 2024-10-10 14:36:57