可输入的下拉框(DropDownList)

来源：互联网发布：汽车产业组织的优化编辑：程序博客网时间：2024/05/26 02:21

1 新建ascx用户控件

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

<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>

<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>

</span>

.<%=Client%>showarrow{margin-left:-<% =Width%>px;width:<% =(Width+18)%>px;}

.<%=Client%>textboxwidth{width:<% =(Width)%>px;border-right-width:0px;<% =TextStyle%>}

</style>

2 代码

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

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

{

private int width = 200;

private string textstyle = "";

bool enable = true;

protected void Page_Load(object sender, EventArgs e)

{

this.DropDownList1.Attributes.Add("onchange", "var obj=this.parentElement.parentElement.getElementsByTagName('input')[0];obj.focus();obj.value=this.value;");

if (!Page.IsPostBack)

{

if (this.DropDownList1.Items.Count > 0)

{

this.TextBox1.Text = this.DropDownList1.SelectedValue;

}

this.DropDownList1.CssClass = this.Client + "showarrow";

this.TextBox1.CssClass = this.Client + "textboxwidth";

}

/// <summary>

/// 下拉框对象

/// </summary>

public DropDownList Select

{

get

{

return this.DropDownList1;

}

/// <summary>

/// 文本框对象

/// </summary>

public TextBox InputText

{

get

{

return this.TextBox1;

}

/// <summary>

/// 选定文本

/// </summary>

public string Text

{

get

{

return this.TextBox1.Text;

}

set

{

this.TextBox1.Text = value;

}

public int Width

{

get

{

return this.width;

}

set

{

this.width = value;

}

public string Client

{

get

{

return this.ClientID;

}

public string TextStyle

{

set

{

this.textstyle = value;

}

get

{

return this.textstyle;

}

public bool Enable

{

set

{

enable = value;

this.TextBox1.Enabled = enable;

this.DropDownList1.Enabled = enable;

}

get

{

return enable;

}

3 测试页

<%@ Register TagPrefix="TDL" TagName="TextDropListShow" Src="~/EditableSelect.ascx" %>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BooksManager.aspx.cs" Inherits="InterFace_Books_BooksManager" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>下拉框测试</title>

</head>

<body>

<div>

<TDL:TextDropListShow ID="txtDrp" runat="server" />

</div>

</form>

</body>

</html>

相关使用：

    protected void Page_Load(object sender, EventArgs e)
    {
        txtDrp.Select.Items.Add("One");
        txtDrp.Select.Items.Add("Two");
        txtDrp.Select.Items.Add("Three");
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = this.txtDrp.Text;
        Label1.Text = this.txtDrp.Select.SelectedValue.ToString();
    }

在FireFox下可以,但是IE下不行

参考文献:http://bbs.51js.com/redirect.php?fid=22&tid=58823&goto=nextnewset

在IE下的运行可以修改代码如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EditableSelect.ascx.cs" Inherits="EditableSelect" %>
 <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<span style="width:18px;border:0px solid red; position:relative; "><asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></span>
<style type="text/css">
.<%=Client%>textboxwidth{width:<% =(Width)%>px;border-right-width:0px;<% =TextStyle%>}
.<%=Client%>showarrow{margin-left:-<% =Width%>px;width:<% =(Width+18)%>px;}
</style>

运行结果:

测试通过！