1. 程式人生 > >DropDownList實現多選功能

DropDownList實現多選功能

<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;