Ajax实现无刷新三联动下拉框

zoukankan html css js c++ java

Ajax实现无刷新三联动下拉框

转自原帖地址：http://www.cnblogs.com/singlepine/archive/2005/10/19/257954.html。

还有另外一种方法：http://gzycm520.blog.51cto.com/attachment/200707/175220_1185374979.rar。

1.html代码

<HTML>
    <HEAD>
        <title>Ajax实现无刷新三联动下拉框</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <SCRIPT language="javascript">
            //城市------------------------------
            function cityResult()
            {
                var city=document.getElementById("DropDownList1");
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
            }

            function get_city_Result_CallBack(response)
            {
                if (response.value != null)
                {
                    //debugger;
                    document.all("DropDownList2").length=0;　　　　
　　　　            var ds = response.value;
                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    {
                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　                {
　　　　                    var name=ds.Tables[0].Rows[i].city;
　　　　　　                var id=ds.Tables[0].Rows[i].cityID;
　　　　　　                document.all("DropDownList2").options.add(new Option(name,id));
　　　　                }
                    }
                }
                return
            }
            //市区----------------------------------------
            function areaResult()
            {
                var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }
            function get_area_Result_CallBack(response)
            {
                if (response.value != null)
                {
                    document.all("DropDownList3").length=0;　　　　
　　　　            var ds = response.value;
                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    {
                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　                {
　　　　　　                var name=ds.Tables[0].Rows[i].area;
　　　　　　                var id=ds.Tables[0].Rows[i].areaID;
　　　　　　                document.all("DropDownList3").options.add(new Option(name,id));
　　　　                }
                    }
                }
                return
            }
            function getData()
            {
                var province=document.getElementById("DropDownList1");
                var pindex = province.selectedIndex;
                var pValue = province.options[pindex].value;
                var pText  = province.options[pindex].text;

                var city=document.getElementById("DropDownList2");
                var cindex = city.selectedIndex;
                var cValue = city.options[cindex].value;
                var cText  = city.options[cindex].text;

                var area=document.getElementById("DropDownList3");
                var aindex = area.selectedIndex;
                var aValue = area.options[aindex].value;
                var aText  = area.options[aindex].text;

                var txt=document.getElementById("TextBox1");

                document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
            }
        </SCRIPT>
    </HEAD>
    <body ms_positioning="GridLayout">
        <form id="Form1" method="post" runat="server">
            <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
                cellPadding="1" width="300" border="1" bgColor="#ccff66">
                <TR>
                    <TD>省市</TD>
                    <TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
                </TR>
                <TR>
                    <TD>城市</TD>
                    <TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
                </TR>
                <TR>
                    <TD>市区</TD>
                    <TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
                </TR>
            </TABLE>
            <asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
                Width="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
                type="button" value="test" onclick="getData();">
        </form>
    </body>
</HTML>
2.cs代码

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace AjaxTest
{
    /**//// <summary>
    /// Summary description for WebForm1.
    /// </summary>
    public class WebForm1 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DropDownList DropDownList1;
        protected System.Web.UI.WebControls.DropDownList DropDownList2;
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.DropDownList DropDownList3;

        private void Page_Load(object sender, System.EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
            if(!Page.IsPostBack)
            {
                this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();
                this.DropDownList1.DataTextField="province";
                this.DropDownList1.DataValueField="provinceID";
                this.DropDownList1.DataBind();

                this.DropDownList1.Attributes.Add("onclick","cityResult();");
                this.DropDownList2.Attributes.Add("onclick","areaResult();");
            }
        }

        Web Form Designer generated code
    }
}
3.AjaxMethod

using System;
using System.Data;
using System.Data.SqlClient;
namespace AjaxTest
{
    /**//// <summary>
    /// Summary description for AjaxMethod.
    /// </summary>
    public class AjaxMethod
    {
        GetProvinceList

        GetCityList

        GetAreaList

        GetDataSet
    }
}
4.web.config

<httpHandlers>
            <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers>

5.ajax.dll下载/Files/singlepine/Ajax.rar
6.真实数据库下载area1.rar
7.源代码下载AjaxTest.rar

查看全文

相关阅读:
Openstack API 开发快速入门
 virtualBox虚拟机到vmware虚拟机转换
 使用Blogilo 发布博客到cnblogs
Openstack Troubleshooting
hdoj 1051 Wooden Sticks（上升子序列个数问题）
sdut 2430 pillars (dp)
hdoj 1058 Humble Numbers(dp)
uva 10815 Andy's First Dictionary（快排、字符串）
sdut 2317 Homogeneous squares
hdoj 1025 Constructing Roads In JGShining's Kingdom(最长上升子序列+二分）

原文地址：https://www.cnblogs.com/Godblessyou/p/1779208.html