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