为了账号安全,请及时绑定邮箱和手机立即绑定

DropDownList与TextBox互动

标签:
JavaScript

昨晚有位网友来电求助,说有一个DropDownList,由于选项过多,想在DropDownList前放一个TextBox,让用户输入文本,DropDownList会选中相应的选项。

如果用户选择DropDownList选择一个选择,会把它的值显示于这个TextBox之上。

Insus.NET做了两个演示。也供大家参考,Demo1,普通方法实现,执行时会有点异常,还待去解决:


 

Demo1.aspx:

5acf07330001405b00110016.jpgView Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo1.aspx.cs" Inherits="Demo1" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <hr />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Text="AAA" Value="aaa"></asp:ListItem>
            <asp:ListItem Text="BBB" Value="bbb"></asp:ListItem>
            <asp:ListItem Text="CCC" Value="ccc"></asp:ListItem>
        </asp:DropDownList>
    </form>
</body>
</html>

 

Demo1.aspx.cs:

5acf07330001405b00110016.jpgView Code using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Demo1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        if (string.IsNullOrEmpty(this.TextBox1.Text)) return;
        this.DropDownList1.ClearSelection();
        this.DropDownList1.Items.FindByText(this.TextBox1.Text).Selected = true;
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (this.DropDownList1.SelectedIndex == -1) return;
        this.TextBox1.Text = this.DropDownList1.SelectedItem.Text;
    }
}

 

 Demo2,Insus.NET使用了适配器(Adapter)来将DropDownList重写TextBox的Text属性。


 

适配器DropDownListAdapter的类:

5acf07330001405b00110016.jpgDropDownListAdapter using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;

/// <summary>
/// Summary description for DropDownListAdapter
/// </summary>
namespace Insus.NET
{
    public class DropDownListAdapter : TextBox
    {
        DropDownList _DropDownList;

        public DropDownListAdapter(DropDownList dropDownList)
        {
            this._DropDownList = dropDownList;
        }

        public override string Text
        {
            get
            {
                return _DropDownList.SelectedItem.Text;
            }
            set
            {
                this._DropDownList.ClearSelection();
                foreach (ListItem li in this._DropDownList.Items)
                {
                    if (li.Text == value)
                        this._DropDownList.Items.FindByText(value).Selected = true;
                    continue;
                }
            }
        }
    }
}

 

Demo2.aspx:

5acf07330001405b00110016.jpgView Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo2.aspx.cs" Inherits="Demo2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>        
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <hr />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Text="AAA" Value="aaa"></asp:ListItem>
            <asp:ListItem Text="BBB" Value="bbb"></asp:ListItem>
            <asp:ListItem Text="CCC" Value="ccc"></asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

 

Demo2.aspx.cs:

5acf07330001405b00110016.jpgView Code using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;

public partial class Demo2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        DropDownListAdapter obj = new DropDownListAdapter(this.DropDownList1);
        obj.Text = this.TextBox1.Text;
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownListAdapter obj = new DropDownListAdapter(this.DropDownList1);
        this.TextBox1.Text = obj.Text;
    }
}

 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消