带多选选项的 HTML 下拉列表

rajdeep_p

2.85/5 (6投票s)

2007年3月5日

CPOL

2分钟阅读

162968

2015

用于从下拉列表中选择多个选项的 ASP .NET 用户控件

下载 MutiSelectCombo.zip - 17.4 KB

引言

ASP.NET 是一种快速有效的编程方式，用于开发小型和企业级 Web 应用程序。它提供了许多用于构建 Web 页面的控件和组件。但我的需求是从 Web 页面的下拉组合框中选择多个选项。 ASP .NET 1.1 没有提供这样的控件，但 ASP .NET 为开发人员提供了开发自定义控件的选项。这对我来说是一个不错的选择，我开发了自定义控件，它将像一个多选组合框一样工作。

此自定义控件可以在 IE 中使用，无需任何更改。此组件未在 mozilla/firefox 上进行测试。要在 firefox 上使用它，需要进行一些更改（在客户端脚本中更改）。

开发组件和说明

为了开发这个控件，使用了简单的 html 类、CSS 和 javascript。服务器端代码是用 C# 和 .NET framework 1.1 编写的。但是此组件可以在 .NET framework 2.0 中使用，只需对服务器端脚本进行少量更改。此组件由一个多行 <SELECT> 和一个 <DIV> 组成。 <DIV> 包含带复选框的选项，位于每个选项的前面。

此外，组件提供了一些属性，开发人员可以通过这些属性设置一些值，以便在 ASP.NET 引擎中呈现它。

属性如下

1. ListItems：开发人员可以设置/获取 NameValueCollection 以填充选项。
2. BackColor：开发人员可以设置/获取下拉列表的背景颜色；
3. Name：开发人员可以设置/获取控件的名称，以区分多个
控件。
4. DisableMethod：开发人员可以设置禁用方法。此方法用于隐藏
页面中的 <select> 组件。开发人员必须编写
语句以隐藏 <select> 组件。因为 Z-Index 不起作用
在 <select> 的情况下。
5. OnChange：开发人员可以附加 javascript 方法，当用户更改
时，该方法将被调用。
6. MaxSize：开发人员可以设置 ListBox 的最大大小。
7. MaxListHeight：开发人员可以设置下拉列表的最大高度。

屏幕截图

1. 展开的下拉列表。

Screenshot - screen1.jpg

2. 选择的值在提交页面后显示在 html 标签中。

Screenshot - screen3.jpg

如何使用该控件

此组件是一个 ASP.NET 用户控件。可以在任何 ASP.NET 网页中使用。此外，为了填充列表，组件使用一个 NameValueCollection 对象作为其属性
"ListItems"。 因此，网页应包含对 "System.Collections.Specialized" 命名空间的引用。此外，该组件正在使用一些图像。在使用控件之前，请确保代码包含正确的图像引用。

从下拉列表中选择选项后，开发人员可以使用 javascript 方法 GetDataListFromMultiSelectCombo() 以分号 (;) 分隔的字符串形式获取选定的项目

使用控件的示例代码


<%@ Page language="c#" AutoEventWireup="false" %>
<%@ Import namespace="System.Collections"%>
<%@ Import namespace="System.Collections.Specialized"%>
<%@ Register Tagprefix="Custom" Tagname="MultiSelectCombo" Src="MultiSelectCombo.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

<html>
  <head>
    <title>Defult Page</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
    <script language="javascript">
    function OnSubmit()
    {
        document.Main.hid_selected_lang.value = GetDataListFromMultiSelectCombo();
        document.Main.action = "MultiSelectComboBox.aspx";
        return true;        
    }
    </script>
  </head>
  <body MS_POSITIONING="GridLayout">
    
    <form id="Main" method="post" runat="server">
    <%
        NameValueCollection opItems = new NameValueCollection();
        opItems.Add("C#","Visual C#");
        opItems.Add("VC++","Visual C++");
        opItems.Add("VB","Visual Basic");
        opItems.Add("J#","Visual J#");
        Languege.ListItems = opItems;
    %>
        
    Select Language: <Custom:MultiSelectCombo id="Languege" Name="Languege" MaxSize="2" MaxListHeight="4" runat="server"></Custom:MultiSelectCombo>
    



    <%
    string sValues = Request["hid_selected_lang"];
    if (sValues != null &&
        sValues.Equals("-1"))
    {
        sValues = "None";
    }
    if (sValues != null && sValues != "")
    {
    %>
    <label id="selected_lang" name="selected_lang">Selected Laguges : <%=sValues%></label>
    <%}%>
    
    
    

    <input type="submit" value="Submit" onclick="OnSubmit()">
    <input type="hidden" id="hid_selected_lang" name="hid_selected_lang">
    
    </form>
    
  </body>
</html>

支持的环境

在开发组件时，使用了 .NET Framework 1.1。但是此控件可以在 .NET Framework 2.0 中使用，只需进行少量或无需更改。