DropDownList实现多选功能

最新推荐文章于 2021-06-07 13:09:38 发布

tanxd137

最新推荐文章于 2021-06-07 13:09:38 发布

阅读量8k

点赞数 1

文章标签： server class function div asp table

本文链接：https://blog.youkuaiyun.com/tanxd137/article/details/6605692

版权

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