ajax实现动态从数据库模糊查询显示到下拉框中，以供选择-技术开发专区

ajax实现动态从数据库模糊查询显示到下拉框中，以供选择

作者：ITPUB论坛编辑： nancy 2008-04-08 00:00

【IT168技术文档】

功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择

1.建立一aspx页面，html代码

1<HTML>
2    <HEAD>
3        <title>WebForm1</title>
4        <SCRIPT language="javascript">
5            //城市------------------------------
 6            function cityResult()
7            {
8                var city=document.getElementById("TextBox1");
9                WebForm1.GetCityList(city.value,get_city_Result_CallBack);
10            }
11
12            function get_city_Result_CallBack(response)
13            {
14                if (response.value != null)
15                {
16                    //debugger;
17                    document.getElementById("DropDownList1").style.display="block";
18                    document.getElementById("DropDownList1").length=0;　　　　
19　　　　            var ds = response.value;
20                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
21                    {
22                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
23　　　　                {
24　　　　                    var name=ds.Tables[0].Rows[i].city;
25　　　　　　                var id=ds.Tables[0].Rows[i].cityID;
26　　　　　　                document.getElementById("DropDownList1").options.add(new Option(name,id));
27　　　　                }
28                    }
29                }
30                else
31                {
32                    document.getElementById("DropDownList1").style.display="none";
33                }
34                return
35            }
36
37            function getData()
38            {
39                var province=document.getElementById("DropDownList1");
40                var pindex = province.selectedIndex;
41                var pValue = province.options[pindex].value;
42                var pText  = province.options[pindex].text;
43
44                document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
45            }
46        </SCRIPT>
47    </HEAD>
48    <body>
49        <form id="Form1" method="post" runat="server">
50            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
51            <br>
52            <asp:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></asp:DropDownList>
53        </form>
54    </body>
55</HTML>

2.cs代码

1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Data;
5using System.Drawing;
6using System.Web;
7using System.Web.SessionState;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.HtmlControls;
11using System.Data.SqlClient;
12namespace ajaxselect
13{
14    /**//**//**//// <summary>
15    /// Summary description for WebForm1.
16    /// </summary>
17    public class WebForm1 : System.Web.UI.Page
18    {
19        protected System.Web.UI.WebControls.TextBox TextBox1;
20        protected System.Web.UI.WebControls.DropDownList DropDownList1;
21
22        private void Page_Load(object sender, System.EventArgs e)
23        {
24            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
25            if (!Page.IsPostBack)
26            {
27                this.TextBox1.Attributes.Add("onchange", "cityResult();");
28                this.DropDownList1.Attributes.Add("onclick", "getData();");
29            }
30        }
31
32        Web Form Designer generated codeWeb Form Designer generated code#region Web Form Designer generated code
33        override protected void OnInit(EventArgs e)
34        {
35            //
36            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
37            //
38            InitializeComponent();
39            base.OnInit(e);
40        }
41
42        /**//**//**//// <summary>
43        /// Required method for Designer support - do not modify
44        /// the contents of this method with the code editor.
45        /// </summary>
46        private void InitializeComponent()
47        {
48            this.Load += new System.EventHandler(this.Page_Load);
49
50        }
51        #endregion
52
53        GetCityListGetCityList#region GetCityList
54        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
55        public DataSet GetCityList(int provinceid)
56        {
57            string sql = "select * from city where father like '%" + provinceid + "%'";
58            return GetDataSet(sql);
59        }
60        #endregion
61        GetDataSetGetDataSet#region GetDataSet
62        public static DataSet GetDataSet(string sql)
63        {
64            string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
65            SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
66            DataSet ds = new DataSet();
67            sda.Fill(ds);
68            return ds;
69        }
70        #endregion
71
72    }
73}

关注我们