两种方式实现省市区联动

最新推荐文章于 2022-10-12 08:58:56 发布

LsxForLove

最新推荐文章于 2022-10-12 08:58:56 发布

阅读量1.4k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/LengSeXiZuo/article/details/38518397

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、aspx方式实现

1、前端

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="省市区联动.aspx.cs" Inherits="参数传递demo.省市区联动" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1"   runat="server">
    <div>
        省：<asp:DropDownList runat="server" ID="ddp" AutoPostBack="true"  OnSelectedIndexChanged="ddp_SelectedIndexChanged">
        </asp:DropDownList>
        市：<asp:DropDownList runat="server" ID="ddp2" AutoPostBack="true" OnSelectedIndexChanged="ddp2_SelectedIndexChanged">
        </asp:DropDownList>
        区：<asp:DropDownList runat="server" ID="ddp3" AutoPostBack="true">
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

2、后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
namespace 参数传递demo
{
    public partial class 省市区联动 : System.Web.UI.Page
    {
        protected StringBuilder s1 = new StringBuilder();
        protected StringBuilder s2 = new StringBuilder();
        protected void Page_Load(object sender, EventArgs e)
        {
            GetSHENG();
        }
        void GetSHENG()
        {
            string sql1 = "select provinceID,province from dbo.hat_province";
            DataTable dtsheng = DbHelperSQL.GetDataTable(sql1);
            foreach (DataRow row in dtsheng.Rows)
            {
                ListItem list = new ListItem(row["province"].ToString(), row["provinceID"].ToString());
                ddp.Items.Add(list);
            }
        }
        protected void GetShi()
        {
            string sql2 = "select cityID,city from dbo.hat_city where  father='" + ddp.Text + "'";
            DataTable dtshi = DbHelperSQL.GetDataTable(sql2);
            foreach (DataRow row in dtshi.Rows)
            {
                ListItem list = new ListItem(row["city"].ToString(), row["cityID"].ToString());
                ddp2.Items.Add(list);
            }
        }
        void GetQu()
        {
            string sql3 = "select areaID,area from dbo.hat_area where father='" + ddp2.Text + "'";
            DataTable dtqu = DbHelperSQL.GetDataTable(sql3);
            foreach (DataRow row in dtqu.Rows)
            {
                ListItem list = new ListItem(row["area"].ToString(), row["areaID"].ToString());
                ddp3.Items.Add(list);
            }
        }
        protected void ddp_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddp2.Items.Clear();
            ddp3.Items.Clear();
            GetShi();
        }
        protected void ddp2_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddp3.Items.Clear();
            GetQu();
        }
    }
}

二、html+ashx+ajax方式实现

1、前端

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jq/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            GetSheng();
            $('#s1').change(function () {
                GetShi($('#s1').val());
            });
            $('#s2').change(function () {
                GetQu($('#s2').val());
            });
        });
        function GetSheng() {
            $.post("省市区联动AJAX.ashx", "state=1", function (html) {
                $('#s1').append(html);
            }, "html");
        }
        function GetShi(shiparid) {
            $('#s3 option').remove();
            $('#s2 option').remove();
            $.post("省市区联动AJAX.ashx", "state=2&shiid=" + shiparid, function (html) {
                $('#s2').append(html);
            }, "html");
        }
        function GetQu(shiparid) {
            $('#s3 option').remove();
            $.post("省市区联动AJAX.ashx", "state=3&shiid=" + shiparid, function (html) {
                $('#s3').append(html);
            }, "html");
        }
    </script>
</head>
<body>
    省：<select id="s1">
    </select>
    市：<select id="s2">
    </select>
     区：<select id="s3">
    </select>
</body>
</html>

二、ashx端

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Text;
namespace 参数传递demo
{
    /// <summary>
    /// 省市区联动AJAX 的摘要说明
    /// </summary>
    public class 省市区联动AJAX : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request["state"].ToString() == "1")
            {
                StringBuilder s = new StringBuilder(1000);
                string sql1 = "select provinceID,province from dbo.hat_province";
                DataTable dtsheng = DbHelperSQL.GetDataTable(sql1);
                foreach (DataRow row in dtsheng.Rows)
                {
                    s.AppendLine("<option value=" + row["provinceID"] + ">" + row["province"] + "</option>");
                }
                context.Response.Write(s);
            }
            if (context.Request["state"].ToString() == "2")
            {
                StringBuilder s = new StringBuilder(1000);
                string sql2 = "select cityID,city from dbo.hat_city where  father='" + context.Request["shiid"].ToString() + "'";
                DataTable dtshi = DbHelperSQL.GetDataTable(sql2);
                foreach (DataRow row in dtshi.Rows)
                {
                    s.AppendLine("<option value=" + row["cityID"] + ">" + row["city"] + "</option>");
                }
                context.Response.Write(s);
            }
            if (context.Request["state"].ToString() == "3")
            {
                StringBuilder s = new StringBuilder(1000);
                string sql3 = "select areaID,area from dbo.hat_area where father='" + context.Request["shiid"].ToString() + "'";
                DataTable dtqu = DbHelperSQL.GetDataTable(sql3);
                foreach (DataRow row in dtqu.Rows)
                {
                    s.AppendLine("<option value=" + row["areaID"] + ">" + row["area"] + "</option>");
                }
                context.Response.Write(s);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}