类似的在dropdownlist中可以实现多选择多个项。
主要是用JS 和div控制,实际上右边的那个是图片。
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="下拉框多选效果.aspx.cs" Inherits="wsw_测试_下拉框多选效果" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <style type="text/css"> .style1 { width: 100%; } </style> <script language="javascript" type="text/javascript"> var timoutID; //大队 var panduan1=1; function ShowMList() { var divRef = document.getElementById("divssddList"); divRef.style.display = "block"; } function HideMList() { document.getElementById("divssddList").style.display = "none"; if(panduan1==2) { document.getElementById("btnssdd").click(); } panduan1=1; } function FindSelectedItems(sender) { 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("texssdd").value = selectedText; panduan1=2; } //小队 var panduan2=1; function ShowMssxd() { var divRef = document.getElementById("divssxdList"); divRef.style.display = "block"; } function HideMssxd() { document.getElementById("divssxdList").style.display = "none"; if(panduan2==2) { document.getElementById("btnssxd").click(); } panduan2=1; } function FindSelectedssxd(sender) { 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("texssxd").value = selectedText; panduan2=2; } //分类盘点 var panduan3=1; function ShowPdlx() { var divRef = document.getElementById("divPdlxList"); divRef.style.display = "block"; } function HidePdlx() { document.getElementById("divPdlxList").style.display = "none"; if(panduan3==2) { document.getElementById("btnPdlx").click(); } panduan3=1; } function FindPdlxItems(sender) { 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("texPdlx").value = selectedText; panduan3=2; } </script> </head> <body> <form id="form1" runat="server"> <div> <table class="style1"> <tr> <td width="15%" height="25" align="left" valign="middle"> <asp:Label ID="lbssdd" runat="server" Text=""></asp:Label> <asp:Panel ID="pnlssdd" runat="server" > <div id="divssdd" runat="server" οnmοuseοver="clearTimeout(timoutID);" οnmοuseοut="timoutID = setTimeout('HideMList()', 75);"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="right"> <asp:TextBox ID="texssdd" runat="server" οnclick="ShowMList()" Width="150px"></asp:TextBox> </td> <td align="left"> <img id="Img1" alt="" runat="server" src="drop.gif" οnclick="ShowMList()" align="left" /> </td> </tr> <tr> <td colspan="2"> <div runat="server" id="divssddList" class="DivCheckBoxList"> <asp:CheckBoxList ID="lstssdd" runat="server" Width="165px" Font-Size="12px" CssClass="CheckBoxList" onclick="FindSelectedItems(this);"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> </asp:CheckBoxList> </div> </td> </tr> </table> </div> </asp:Panel> <asp:Button ID="btnssdd" runat="server" Text="btnssdd" CssClass="yincang" Visible="false" /> </td> </tr> </table> </div> </form> </body> </html>
这样就能简单的实现一些功能