dropdownlist可以多選。類似的例子。。。

本文轉載自查看原文 2012-04-09 14:51 5038 c#/ B/S webform/ .net

類似的在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" onmouseover="clearTimeout(timoutID);" onmouseout="timoutID = setTimeout('HideMList()', 75);">
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td align="right">
                                            <asp:TextBox ID="texssdd" runat="server" onclick="ShowMList()" Width="150px"></asp:TextBox>
                                        </td>
                                        <td align="left">
                                            <img id="Img1" alt="" runat="server" src="drop.gif" onclick="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>

這樣就能簡單的實現一些功能

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 DropDownList下拉框多選 DropdownList checkboxlist 下拉框多選功能 ,模擬dropdownlist帶復選框效果微信小程序：check多選+radio單選例子參考多選【新特性速遞】類似Windows資源管理器的多選框 ajax的表單提交（類似於表單提交解決checkbox多選問題） DropDownList 控件微信小程序-組件封裝類似picker,模態框彈出全屏和半屏,多選,單選,日期選擇器禁用DropDownList某一選項