多选下拉CheckBoxList的DropDownList

写在前面：DropDownList下拉的东西都是文字，而不是CheckBox，要是需要下拉多个CheckBox那就要自已写一个控件了。事实上，就是将CheckBoxList控件放入DropDownList中，下面介绍一个简单的方案，可以作为一个参考。

 

源代码

http://www.codeproject.com/KB/webforms/MultiSelectDropDown.aspx

 

效果图

 

   
    点击控件右边的箭头，就会下拉一个CheckBoxList，用户选择了需要的内容之后可以点击左下角的关闭图标。然后DropDownList的值区域就会显示上面的内容。这一功能是通过多个控件和javascript结合而成的。

 

代码

    查看代码，你会发现，这个控件并没有像一般的自定义控件一下独立地定义出来，而是使用一个aspx页面来表达的。

显示与隐藏

    下面的三个网页元素，是控制下拉区域的显示与隐藏的。

<img id="imgShowHide" runat="server" src="drop.gif" onclick="ShowMList()" align="left" />

<input id="txtSelectedMLValues" type="text" readonly="readonly" onclick="ShowMList()" style="width:229px;" runat="server" />

<label runat="server" onclick="HideMList();" class="LabelClose" id="lblClose"> x</label>

    为了实现更好的交互性，ShowMList,HideMList都是javascript的函数，同时也为了照顾.net程序的调用，就将html设置了runat="server"。

页网上，写有ShowMList和HideMList的javascript函数。

值选择

    当用户点击下拉的项目时，DropDownList的值区域会随着发生变化，这要的功能是通过为CheckBoxList注入javascript来实现的。

查看Default.aspx.cs文件，你会发现这样的逻辑

lstMultipleValues.Attributes.Add("onclick",……);

这就是为控件加入onclick的javascript代码

填充数据

    另一个重要的函数是SetMultiValue，就是使用DataTable的形式向CheckBoxList填充数据。