dropdownlist可以多选。类似的例子。。。

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

weixin_34245169

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

阅读量283

点赞数

文章标签： c# xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/smile-wei/archive/2012/04/09/2438950.html

版权

类似的在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>

这样就能简单的实现一些功能

转载于:https://www.cnblogs.com/smile-wei/archive/2012/04/09/2438950.html

weixin_34245169

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dropdownlist可以多选。类似的例子。。。

类似的在dropdownlist中可以实现多选择多个项。主要是用JS 和div控制，实际上右边的那个是图片。HTML<%@ Page Language="C#" AutoEventWireup="true" CodeFile="下拉框多选效果.aspx.cs" Inherits="wsw_测试_下拉框多选效果" %><!DOCTYPE html PUB...
复制链接

扫一扫