aspx Web 用户控件 多选下拉框

html部分：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MultiSelectDropDown.ascx.cs" Inherits="UserControl_MultiSelectDropDown" %>

 

<asp:TextBox ID="txtSelection" runat="server" placeholder="请选择"></asp:TextBox>

<asp:Panel ID="Panel1" runat="server">

   <asp:Panel ID="Panel2" runat="server">

       <asp:CheckBoxList ID="cbSelections" runat="server">

       </asp:CheckBoxList>

 

   </asp:Panel>

   <div style="display: flex; padding: 2px;">

       <div>清空</div>

       <div>确定</div>

   </div>

</asp:Panel>

 

 

 

 

<script type="text/javascript">

   function showSelectionBox() {

       var panel = document.getElementById('<%= Panel1.ClientID %>');

       panel.style.display = 'block';

       panel.style.position = 'absolute';

       panel.style.backgroundColor = '#fff';

       panel.style.padding = "10px";

       panel.style.textAlign = "left";

 

       var panel2 = document.getElementById('<%= Panel2.ClientID %>');

       panel2.style.height = "200px";

       panel2.style.overflowY = "scroll";

 

 

       var txtSelection = document.getElementById('<%= txtSelection.ClientID %>');

       //panel.style.top = txtSelection.getBoundingClientRect().top + txtSelection.style.offsetHeight + 'px';

       panel.style.marginTop = txtSelection.getBoundingClientRect().height + 'px';

       panel.style.left = txtSelection.getBoundingClientRect().left + 'px';

 

 

 

   }

 

   function selectItem() {

 

       var varray = GetCheckBoxListValue('<%= cbSelections.ClientID %>');

       if (varray.length > 0) {

           var txtSelection = document.getElementById('<%= txtSelection.ClientID %>');

           txtSelection.value = varray.join(',');

 

       }

       initCbSelections();

 

   }

   function reset() {

       ResetCheckBoxListValue('<%= cbSelections.ClientID %>');

       var txtSelection = document.getElementById('<%= txtSelection.ClientID %>');

       txtSelection.value = '';

       initCbSelections();

   }

   function initCbSelections() {

       var panel = document.getElementById('<%= Panel1.ClientID %>');

       panel.style.display = 'none';

   }

   function ResetCheckBoxListValue(objID) {

       var CheckBoxList = document.getElementById(objID);

       if (CheckBoxList == null) return;

       if (CheckBoxList.tagName == "TABLE") {

           for (i = 0; i < CheckBoxList.rows.length; i++)

               for (j = 0; j < CheckBoxList.rows[i].cells.length; j++)

                   if (CheckBoxList.rows[i].cells[j].childNodes[0])

                       if (CheckBoxList.rows[i].cells[j].childNodes[0].checked == true)

                           CheckBoxList.rows[i].cells[j].childNodes[0].checked = false;

       }

       if (CheckBoxList.tagName == "SPAN") {

           for (i = 0; i < CheckBoxList.childNodes.length; i++)

               if (CheckBoxList.childNodes[i].tagName == "INPUT")

                   if (CheckBoxList.childNodes[i].checked == true) {

                       CheckBoxList.childNodes[i].checked = false;

                   }

       }

   }

   function GetCheckBoxListValue(objID) {

       var v = new Array();

       var CheckBoxList = document.getElementById(objID);

       if (CheckBoxList == null) return v;

       if (CheckBoxList.tagName == "TABLE") {

           for (i = 0; i < CheckBoxList.rows.length; i++)

               for (j = 0; j < CheckBoxList.rows[i].cells.length; j++)

                   if (CheckBoxList.rows[i].cells[j].childNodes[0])

                       if (CheckBoxList.rows[i].cells[j].childNodes[0].checked == true)

                           v.push(CheckBoxList.rows[i].cells[j].childNodes[1].innerText);

       }

       if (CheckBoxList.tagName == "SPAN") {

           for (i = 0; i < CheckBoxList.childNodes.length; i++)

               if (CheckBoxList.childNodes[i].tagName == "INPUT")

                   if (CheckBoxList.childNodes[i].checked == true) {

                       i++;

                       v.push(CheckBoxList.childNodes[i].innerText);

                   }

       }

       return v;

   }

 

   initCbSelections();

</script>

c#部分：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class UserControl_MultiSelectDropDown : System.Web.UI.UserControl

{

 

 

   public string CssClass

   {

       get { return txtSelection.CssClass; }

       set { txtSelection.CssClass = value; }

   }

 

   public ListItemCollection Items

   {

       get

       {

 

           return cbSelections.Items;

       }

       set

       {

           var data = value as ListItemCollection;

           cbSelections.DataSource = data;

           cbSelections.DataBind();

       }

 

   }

   public List<string> SelectedTexts

   {

       get { return txtSelection.Text.Split(',').ToList(); }

   }

 

   protected void Page_Load(object sender, EventArgs e)

   {

 

   }

 

}

使用方法：

<%@ Register TagPrefix="uc" TagName="MultiSelectDropDown" Src="~/UserControl/MultiSelectDropDown.ascx" %>

<uc:MultiSelectDropDown ID="multiSelectDropDown" runat="server" CssClass="Public_Input IE_textcentered"></uc:MultiSelectDropDown>

 

this.multiSelectDropDown.Items.Add(new ListItem(item.Value, item.Key));

 

multiSelectDropDown.SelectedTexts