ASP.NET中的多选下拉列表

• 下载 MultiDropdownSample.zip - 30.8 KB

引言

ASP.NET中的下拉列表用于从列表中选择单个项目。列表框控件用于选择多个项目，但它在页面上占用更多空间。包含许多此类控件的ASP.NET页面可能难以找到每个控件的适当空间和对齐方式。

为了克服这个问题，我正在介绍一个多选下拉列表框控件。它是一个用户控件，可以直接轻松地用于页面上。它允许用户从列表中选择多个项目，所选项目将以逗号分隔的格式显示在文本区域中，并且它还可以保留所选项目。

如何使用此控件

用户控件MultiSelectDropDown可以放置在任何网页上。

将MultiSelectDropDown控件拖放到您想要使用多选功能的网页上。

使用适当的值填充下拉列表。在我的示例中，它是这样填充的：

private void Page_Load(object sender, System.EventArgs e)
{
   if (!Page.IsPostBack )
   {
    MultiSelectDropDown1.Clear();
    MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Apple","1")) ;
    MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Grapes","2")) ;
    MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Orange","3")) ;
    MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Strawberry","4")) ;
    MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Water Melon","5")) ;
   }
}

System.Collections.ArrayList selTexts = MultiSelectDropDown1.SelectedTexts;

SelectedTexts属性返回列表中所选项目的ArrayList，SelectedValues属性

以下是此控件提供的主要公共属性：

SelectedTexts	列表中所选文本的ArrayList
SelectedValues	列表中所选项目对应的值的ArrayList
SelectedText	以逗号分隔的所选文本string
SelectedItems	列表中所选项目对应的值和文本的ArrayList
ListWidth	设置/获取控件的宽度
列表	项目的列表

屏幕截图

以下屏幕截图显示了如何从列表中选择多个项目。

可以通过控件的ListWidth属性更改控件的宽度。

MultiSelectDropDown1.ListWidth = Convert.ToDouble(txtWidth.Text);

下图显示，当您在“下拉宽度”字段中输入150并单击“设置下拉宽度”按钮时，控件宽度已从250更改为150。

下拉列表还以逗号分隔的格式显示所选文本的工具提示。如果下拉列表的宽度不足以显示所有选定的文本，它可以帮助用户找出选定的项目是什么，而无需单击下拉列表。

下图显示文本的工具提示。

当您单击“显示所选水果”按钮时，列表中所选的项目将添加到“所选水果”列表框中。

代码如下

ListBox1.Items.Clear();
System.Collections.ArrayList selItems = MultiSelectDropDown1.SelectedTexts;
ListBox1.DataSource = selItems;
ListBox1.DataBind();

以下代码显示了如何设置控件的所选项目。

ArrayList selectedItems = new ArrayList();
// Select the items from the list
foreach (System.Web.UI.WebControls.ListItem selItem in ListBox1.Items )
{
   System.Web.UI.WebControls.ListItem li = ListBox1.Items.FindByText(selItem.Text ) ;
   selectedItems.Add(li);
}
MultiSelectDropDown1.SelectedItems =selectedItems;

它使用项目的ArrayList设置控件的SelectedItems属性。

结论

这是一个非常有用且简单的控件，可以用于任何网页，而与.NET版本无关。