DropDownList實現多選功能
阿新 • • 發佈:2019-01-06
<div id="divCustomCheckBoxList" runat="server"> <table> <tbody> <tr> <td align="right" class="DropDownLook"> <input id="txtSelectedMLValues" type="text" readonly="readonly" style="width:229px;" runat="server" /> </td> <td align="left" class="DropDownLook"> <img id="imgShowHide" runat="server" src="~/images/drop.gif" align="left" alt="" /> </td> </tr> <tr> <td colspan="2" class="DropDownLook"> <div> <div runat="server" id="divCheckBoxListClose" class="DivClose"> <label runat="server" class="LabelClose" id="lblClose"> x</label> </div> <div runat="server" id="divCheckBoxList" class="DivCheckBoxList"> <asp:checkboxlist id="lstMultipleValues" runat="server" width="250px" cssclass="CheckBoxList"></asp:checkboxlist> </div> </div> </td> </tr> </tbody> </table> </div> <br /> <div> <br /> <br /> <asp:label id="lblTextSelected" runat="server" text="" font-bold="true"></asp:label> </div>
以上為前臺頁面 需要配合 JS事件。 ID需要改
//DropDownList 多選 var timoutID; function ShowMList() { var divRef = document.getElementById("ctl00_ContentPlaceHolder1_divCheckBoxList"); divRef.style.display = "block"; var divRefC = document.getElementById("ctl00_ContentPlaceHolder1_divCheckBoxListClose"); divRefC.style.display = "block"; } function HideMList() { document.getElementById("ctl00_ContentPlaceHolder1_divCheckBoxList").style.display = "none"; document.getElementById("ctl00_ContentPlaceHolder1_divCheckBoxListClose").style.display = "none"; } function FindSelectedItems(sender, textBoxID) { var cblstTable = document.getElementById(sender.id); var checkBoxPrefix = sender.id + "_"; var noOfOptions = cblstTable.rows.length; var selectedText = ""; for (i = 0; i < noOfOptions; ++i) { if (document.getElementById(checkBoxPrefix + i).checked) { if (selectedText == "") selectedText = document.getElementById(checkBoxPrefix + i).parentNode.innerText; else selectedText = selectedText + "," + document.getElementById(checkBoxPrefix + i).parentNode.innerText; } } document.getElementById(textBoxID.id).value = selectedText; }
//DropDownList多選的資料繫結
protected void SetMultiValue()
{
DataTable dt = GetRoles();
lstMultipleValues.DataSource = dt;
lstMultipleValues.DataTextField = "RoleName";
lstMultipleValues.DataValueField = "RoleId";
lstMultipleValues.DataBind();
}
//頁面想要顯示的文字 lblTextSelected.Text = "Submitted Values: " + txtSelectedMLValues.Value;