多选下拉框 multiple select drop down list

 

 

找了很久例子,大多不能满足自己的要求,于是自己简单做了一个.

 

this.MultipleSelectDropdownList1.DataSource = list;
this.MultipleSelectDropdownList1.DataTextField = "prov";
this.MultipleSelectDropdownList1.DataValueField = "capital";
this.MultipleSelectDropdownList1.DataBind();

 

使用的时候,需要绑定数据 DataSource, 继承IList

需要指定显示属性 DataTextField 和 值属性 DataValueField

 

在页面回传后,可以通过

this.selectedID.InnerHtml = this.MultipleSelectDropdownList1.SelectedValues;
this.selectedText.InnerHtml = this.MultipleSelectDropdownList1.SelectedText;

 

这样获取选中的值或者显示文本.

 

控件cs文件大致如下:

 

public partial class MultipleSelectDropdownList : System.Web.UI.UserControl { public int DefaultHeight = 100; private string ViewStateDataSource; private IList dataSource = null; public IList DataSource { get { return dataSource; } set { dataSource = value; } } public string DataTextField { get; set; } public string DataValueField { get; set; } public string Text { get { return this.mainTxt.Text; } } private bool enabled = true; public bool Enabled { get { return enabled; } set { enabled = value; if (enabled) { this.mainTxt.Attributes.Add("accesskey", "SelectControl"); } else { this.mainTxt.Attributes.Remove("accesskey"); } } } public string SelectedValues { get { string selected = this.selectedValues.Value; if (!string.IsNullOrEmpty(selected)) selected = selected.Substring(0, selected.Length - 1); return selected; } set { if (!string.IsNullOrEmpty(value)) { string[] tmp = value.Split(new string[1] { "," }, StringSplitOptions.RemoveEmptyEntries); string items = ""; if (tmp != null && tmp.Length > 0) { foreach (string val in tmp) { items += "/"" + val + "/", "; } } if (!string.IsNullOrEmpty(items)) { items = items.Substring(0, items.Length - 2); string script = "<mce:script language=/"javascript/" type=/"text/javascript/"><!-- /r/nvar " + this.ClientID + "SelectedArray = [ " + items + " ];/r/n"; script += this.ClientID + "PreSetValues(" + this.ClientID + "SelectedArray);/r/n // --></mce:script>"; this.scripts.InnerHtml = script; } } } } public string SelectedText { get { string selected = this.selectedText.Value; if (!string.IsNullOrEmpty(selected)) selected = selected.Substring(0, selected.Length - 1); return selected; } } public MultipleSelectDropdownList() :base() { ViewStateDataSource = this.ClientID + "_DataSource"; DataTextField = ""; DataValueField = ""; } protected void Page_Load(object sender, EventArgs e) { if (enabled) { this.mainTxt.Attributes.Add("accesskey", "SelectControl"); } else { this.mainTxt.Attributes.Remove("accesskey"); } if (IsPostBack && !string.IsNullOrEmpty(this.selectedText.Value)) this.mainTxt.Text = this.selectedText.Value; } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); } public override void DataBind() { if (this.DataSource == null) return; if (DataSource.Count > 0) { PropertyInfo value = DataSource[0].GetType().GetProperty(this.DataValueField); PropertyInfo text = DataSource[0].GetType().GetProperty(this.DataTextField); if (value != null && text != null) { for (int i = 0; i < dataSource.Count; i++) { var item = DataSource[i]; TableRow row = new TableRow(); TableCell tc = new TableCell(); HtmlInputCheckBox checkbox = new HtmlInputCheckBox(); HtmlGenericControl span = new HtmlGenericControl("span"); checkbox.ID = this.ClientID + "_checkBox_" + i.ToString(); checkbox.Attributes.Add("value", Convert.ToString(value.GetValue(item, null))); checkbox.Attributes.Add("title", Convert.ToString(text.GetValue(item, null))); checkbox.Attributes.Add("accesskey", this.ClientID); span.InnerHtml = Convert.ToString(text.GetValue(item, null)); tc.Controls.Add(checkbox); tc.Controls.Add(span); row.Controls.Add(tc); this.checkboxes.Rows.Add(row); } } } } }

 

ascx文件如下:

 

<mce:script language="javascript" type="text/javascript"><!-- var <%=this.ClientID %>dropDownMaxHeight = 100; var <%=this.ClientID %>Enabled = <%=this.Enabled.ToString().ToLower() %>; var <%=this.ClientID %>SetDiv = function () { var checkDivHeight = document.getElementById("<%=this.checkboxes.ClientID %>").offsetHeight; var setHeight = checkDivHeight > <%=this.ClientID %>dropDownMaxHeight ? <%=this.ClientID %>dropDownMaxHeight : checkDivHeight; $("#<%=this.checkboxList.ClientID %>").css("height", setHeight + "px"); if (checkDivHeight > <%=this.ClientID %>dropDownMaxHeight) { $("#<%=this.checkboxList.ClientID %>").css("overflow-y", "scroll"); } var checkInputWidth = document.getElementById("<%=this.inputField.ClientID %>").offsetWidth - 22; $("#<%=this.mainTxt.ClientID %>").css("width", checkInputWidth + "px"); $("#<%=this.checkboxList.ClientID %>").hide(); } var <%=this.ClientID %>hidden = true; var <%=this.ClientID %>hideSelectMenu = function(){ $("#<%=this.checkboxList.ClientID %>").hide(); <%=this.ClientID %>hidden = true; } $(function () { $("#<%=this.dropDownArrow.ClientID %>").click(function () { if(!<%=this.ClientID %>Enabled)return; if (<%=this.ClientID %>hidden) { $("#<%=this.checkboxList.ClientID %>").show(); <%=this.ClientID %>hidden = false; } else { $("#<%=this.checkboxList.ClientID %>").hide(); <%=this.ClientID %>hidden = true; } }); var <%=this.ClientID %>timeoutId = null; $("#<%=this.main.ClientID %>").mouseover(function () { clearTimeout(<%=this.ClientID %>timeoutId); }); $("#<%=this.main.ClientID %>").mouseout(function () { <%=this.ClientID %>timeoutId = setTimeout("<%=this.ClientID %>hideSelectMenu()", 750); }); }); var <%=this.ClientID %>Array = new $.Hashtable(); var <%=this.ClientID %>PreSetValues = function(arr){ $("input:checkbox[accesskey='<%=this.ClientID %>']").each(function(){ var inArr = $.inArray($(this).val(), arr); if(inArr > -1){ <%=this.ClientID %>Array.add($(this).val(), $(this).attr("title")); $(this).attr("checked", "true"); } }); <%=this.ClientID %>SetMainText(); } // --></mce:script> <div id="main" runat="server" style="width:240px"> <div id="inputField" runat="server" style="width:100%; overflow-x:visible; vertical-align:bottom"> <table border="0" cellpadding="0" cellspacing="0" style="width:100%; border-width:0px; border-collapse:collapse;"> <tr style="border-width:0px" mce_style="border-width:0px"> <td align="right" style="border-width:0px" mce_style="border-width:0px"> <asp:TextBox ID="mainTxt" runat="server" Width="100" ReadOnly="true"></asp:TextBox> </td> <td align="left" style="width:20px; border-width:0px"> <img src="./image/dropDownArrow1.jpg" mce_src="image/dropDownArrow1.jpg" width="18" height="18" id="dropDownArrow" runat="server" /> </td> </tr> </table> </div> <div id="checkboxList" runat="server" style="border-style:solid; border-color:Lime; border-width:1px; width:240px; border-color:Gray; position:absolute; background-color:White"> <asp:Table runat="server" ID="checkboxes"> </asp:Table> </div> <asp:HiddenField ID="selectedValues" runat="server" /> <asp:HiddenField ID="selectedText" runat="server" /> </div> <mce:script language="javascript" type="text/javascript"><!-- <%=this.ClientID %>SetDiv(); var <%=this.ClientID %>SetMainText = function(){ $("#<%=this.mainTxt.ClientID %>").val(""); $("#<%=this.selectedValues.ClientID %>").val(""); $("#<%=this.selectedText.ClientID %>").val(""); var keys = <%=this.ClientID %>Array.keys; $(keys).each(function(i, n){ if(n != null && n != "undefined"){ $("#<%=this.mainTxt.ClientID %>").val($("#<%=this.mainTxt.ClientID %>").val() + <%=this.ClientID %>Array.get(n) + ","); $("#<%=this.selectedText.ClientID %>").val($("#<%=this.selectedText.ClientID %>").val() + <%=this.ClientID %>Array.get(n) + ","); $("#<%=this.selectedValues.ClientID %>").val($("#<%=this.selectedValues.ClientID %>").val() + n + ","); } }); } $("input:checkbox[accesskey='<%=this.ClientID %>']").each(function () { $(this).click(function () { if ($(this).attr("checked")) { var inArr = <%=this.ClientID %>Array.containsKey($(this).val()); if(!inArr){ <%=this.ClientID %>Array.add($(this).val(), $(this).attr("title")); <%=this.ClientID %>SetMainText(); } } else { var inArr = <%=this.ClientID %>Array.containsKey($(this).val()); if(inArr){ <%=this.ClientID %>Array.remove($(this).val()); <%=this.ClientID %>SetMainText(); } } }); }); // --></mce:script> <div id="scripts" runat="server" style="display:none" mce_style="display:none"> </div>

 

示例网址:

http://www.xbstudio.net/multiselectdroplist.aspx

 

示例网址页面代码:

 

public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { List<ProvCity> list = new List<ProvCity>(); list.Add(new ProvCity { capital = "福州", prov = "福建" }); list.Add(new ProvCity { capital = "广州", prov = "广东" }); list.Add(new ProvCity { capital = "杭州", prov = "浙江" }); list.Add(new ProvCity { capital = "南昌", prov = "江西" }); list.Add(new ProvCity { capital = "石家庄", prov = "河北" }); list.Add(new ProvCity { capital = "长沙", prov = "湖南" }); list.Add(new ProvCity { capital = "南京", prov = "江苏" }); list.Add(new ProvCity { capital = "西安", prov = "陕西" }); list.Add(new ProvCity { capital = "太原", prov = "山西" }); list.Add(new ProvCity { capital = "兰州", prov = "甘肃" }); this.MultipleSelectDropdownList1.DataSource = list; this.MultipleSelectDropdownList1.DataTextField = "prov"; this.MultipleSelectDropdownList1.DataValueField = "capital"; this.MultipleSelectDropdownList1.DataBind(); } protected void Button1_Click(object sender, EventArgs e) { this.selectedID.InnerHtml = this.MultipleSelectDropdownList1.SelectedValues; this.selectedText.InnerHtml = this.MultipleSelectDropdownList1.SelectedText; }