Ajax三级联动菜单（转载）

最新推荐文章于 2021-10-03 17:02:15 发布

Neo_in_SAP

最新推荐文章于 2021-10-03 17:02:15 发布

阅读量3.2k

点赞数

分类专栏： .NET 文章标签： ajax dataset textbox callback button function

.NET 专栏收录该内容

74 篇文章 0 订阅

订阅专栏

页面代码：

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

<!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>
        <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");
//                alert(city.value);
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);

            }

            function get_city_Result_CallBack(response)
            {
//                alert(response.value);
                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));
　　　　                }
                    }
                }

                areaResult();
                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" οnlοad="cityResult();" >
        <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" Width="80px"></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" οnclick="getData();" id="Button1">
              
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </form>
    </body>
</html>

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 AjexTest_DropTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, 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("onchange", "cityResult();");
this.DropDownList2.Attributes.Add("onchange", "areaResult();");

this.Button2.Attributes.Add("onclick", "alert('dd')");
}

}
}

类：

using System;
using System.Data;
using System.Data.SqlClient;

/** <summary>
/// Summary description for AjaxMethod.
/// </summary>
public class AjaxMethod
{
    #region GetProvinceList
    public static DataSet GetProvinceList()
    {
        string sql="select * from province";
        return GetDataSet(sql);
    }
    #endregion

    #region GetCityList
    [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
    public DataSet GetCityList(int provinceid)
    {
        string sql="select * from city where father = '"+provinceid + "'";
        return GetDataSet(sql);
    }
    #endregion

    #region GetAreaList
    [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
    public DataSet GetAreaList(int cityid)
    {
        string sql="select * from area where father = '" + cityid + "'";
        //string sql = "select * from area ";
        return GetDataSet(sql);
    }
    #endregion

    #region GetDataSet
    public static DataSet GetDataSet(string sql)
    {
        string ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
        System.Data.OleDb.OleDbDataAdapter oda =new System.Data.OleDb.OleDbDataAdapter(sql,ConnectionString);
        DataSet ds=new DataSet();
        oda.Fill(ds);
        return ds;
    }
    #endregion
}

Neo_in_SAP

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Ajax三级联动菜单（转载）

页面代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > Ajax实现无刷新三联动下拉框 http://schemas.microsoft.com/intellisense/ie5
复制链接

扫一扫

专栏目录