65.9K
CodeProject 正在变化。 阅读更多。
Home

Web 应用程序的多选下拉列表

Sandeep Mewara
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.83/5 (73投票s)

2008年9月25日

CPOL

2分钟阅读

viewsIcon

356472

downloadIcon

6742

如何在 Web 应用程序中从“下拉列表外观”中选择多个值

引言

当Web应用程序需要选择多个值时，空间至关重要，并且需要一个客户端交互的用户界面 - 具有自动折叠功能并且看起来像多选下拉菜单的控件是一个不错的选择。

这是一个允许用户通过下拉菜单选择多个值的控件。 它将输入元素、图像和一个checkboxlist组合在一起，以提供多选下拉菜单的感觉。 除了显式的关闭选项外，它还具有自动折叠功能，使其具有普通下拉菜单的完整感觉。 开发人员可以根据自己的需要非常轻松地调整控件。 本文附带了相同的代码示例。

背景

最近，我们的项目需要提供多选选项。 对于多选，ASP.NET 提供了CheckBoxList，它占据了相当大的空间，并且并不总是符合UI要求。 在我们的UI中，根据客户的要求，我们被要求使用类似下拉菜单的功能，可以选择多个值（就像.NET Windows中的一个控件一样）。 我在 The Code Project 上搜索并用 Google 搜索了它，但几乎找不到任何提供下拉菜单外观并允许多选的控件。 有一些，但它们不是免费的！ 所以，我继续自己制作了一个。 并且由于是我自己制作的，所以我添加了所有我认为对用户友好的功能。

Using the Code

首先是放置控件，以提供下拉菜单的外观。 这是在 HTML 中使用正确的 CSS 控制来实现的。

<div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);"
         onmouseout="timoutID = setTimeout('HideMList()', 750);">
    <table>
        <tr>
            <td align="right" class="DropDownLook">
               <input id="txtSelectedMLValues" type="text" readonly="readonly"
                 onclick="ShowMList()" style="width:229px;" runat="server" />
            </td>
            <td align="left" class="DropDownLook">
               <img id="imgShowHide" runat="server" src="drop.gif"
                          onclick="ShowMList()" align="left" />
            </td>
        </tr>
        <tr>
            <td colspan="2" class="DropDownLook">
               <div>
                   <div runat="server" id="divCheckBoxListClose" class="DivClose">
                         <label runat="server" onclick="HideMList();"
                                   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>
    </table>
</div>

CSS在这里有一个非常重要的作用，使其具有下拉菜单的外观

.DivClose
{
         display:none;
         position:absolute;
         width:250px;
         height:220px;
         border-style:solid;
         border-color:Gray;
         border-width:1px;
         background-color:#99A479;
}

.LabelClose
{
         vertical-align:text-top;
         position:absolute;
         bottom:0px;
         font-family:Verdana;
}

.DivCheckBoxList
{
         display:none;
         background-color:White;
         width:250px;
         position:absolute;
         height:200px;
         overflow-y:auto;
         overflow-x:hidden;
         border-style:solid;
         border-color:Gray;
         border-width:1px;
}

.CheckBoxList
{
         position:relative;
         width:250px;
         height:10px;
         overflow:scroll;
         font-size:small;
}

当填充CheckBoxList控件时，JavaScript 处理器会附加到它，以便任何选项的选择/取消选择都会反映在输入元素中（在下拉菜单中放置选定的值）。

// Append an event to the checkboxes in the list
lstMultipleValues.Attributes.Add("onclick", "FindSelectedItems
         (this," + txtSelectedMLValues.ClientID + ");");

使用 JavaScript，我们跟踪列表中选择了什么。 此外，div元素的打开和关闭也通过使用onMouseOver、onMouseOut事件的 JavaScipts 来处理。

<script type="text/javascript">
   var timoutID;

   //This function shows the checkboxlist
   function ShowMList()
   {
       var divRef = document.getElementById("divCheckBoxList");
       divRef.style.display = "block";
       var divRefC = document.getElementById("divCheckBoxListClose");
       divRefC.style.display = "block";
   }

   //This function hides the checkboxlist
   function HideMList()
   {
       document.getElementById("divCheckBoxList").style.display = "none";
       document.getElementById("divCheckBoxListClose").style.display = "none";
   }

   //This function finds the checkboxes selected in the list and using them,
   //it shows the selected items text in the textbox (comma separated)
   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;
    }
</script>

控件的客户端事件以这样一种方式使用，只要我们有鼠标悬停在控件（文本框或下拉菜单或复选框列表或滚动条）上，列表就会打开。 一旦鼠标离开控件，在一定时间（可配置）后，它会自动折叠。 为了增加用户的灵活性，还在控件底部提供了一个关闭选项。 开发人员可以根据自己的要求调整控件。

关注点

这项工作受到了团队成员的赞赏，客户认为这是一种为用户提供多选选项的良好而简洁的方式！ 最后但并非最不重要的是，它是免费的！

历史

  • 2008 年 12 月 14 日：措辞已更改
  • 2008 年 9 月 25 日：初始帖子
© . All rights reserved.