多选下拉框 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;
}