常用省市区无刷新联动实例

简介: 1、jquery代码 function getCity(CityVal) { var DDL_Province = $("#DDL_Province"); var DDL_City = $("#DDL_City"); DDL_City.

1、jquery代码

function getCity(CityVal) {
    var DDL_Province = $("#DDL_Province");
    var DDL_City = $("#DDL_City");
    DDL_City.empty();
    DDL_City.append("<option value=\"0\">市/区</option>");
    $.ajax(
    {
        type: "post",
        url: "/UserCart/Controller/CityAreas.ashx",
        data: { "type": "city", "provinceID": DDL_Province.val() },
        dataType: "json",
        async: false,
        success: function (msg) {

            for (var i = 0; i < msg.length; i++) {

                if (CityVal == msg[i].CityName) {
                    if (msg[i].IsCOD == 1) {
                        DDL_City.append("<option value=" + msg[i].CityID + " selected=\"selected\">" + msg[i].CityName + "*</option>");
                    } else {
                        DDL_City.append("<option value=" + msg[i].CityID + " selected=\"selected\">" + msg[i].CityName + "</option>");
                    }
                } else {
                    if (msg[i].IsCOD == 1) {
                        DDL_City.append("<option value=" + msg[i].CityID + " >" + msg[i].CityName + "*</option>");
                    } else {
                        DDL_City.append("<option value=" + msg[i].CityID + " >" + msg[i].CityName + "</option>");
                    }
                }
            }
            getArea('');
            GetAddreesSpan();
        }
    })
};

function getArea(AreaVal) {

    var DDL_City = $("#DDL_City");
    var DDL_Area = $("#DDL_Area");
    DDL_Area.empty();
    DDL_Area.append("<option value=\"0\">县/乡</option>");
    $.ajax(
    {
        type: "post",
        url: "/UserCart/Controller/CityAreas.ashx",
        data: { "type": "district", "cityID": DDL_City.val() },
        dataType: "json",
        async: false,
        success: function (msg) {

            for (var i = 0; i < msg.length; i++) {
                if (AreaVal == msg[i].DistrictName) {
                    if (msg[i].IsCOD == 1) {
                        DDL_Area.append("<option value=" + msg[i].DistrictID + "  selected=\"selected\">" + msg[i].DistrictName + "*</option>");
                    } else {
                        DDL_Area.append("<option value=" + msg[i].DistrictID + "  selected=\"selected\">" + msg[i].DistrictName + "</option>");
                    }
                } else {

                    if (msg[i].IsCOD == 1) {
                        DDL_Area.append("<option value=" + msg[i].DistrictID + " >" + msg[i].DistrictName + "*</option>");
                    } else {
                        DDL_Area.append("<option value=" + msg[i].DistrictID + " >" + msg[i].DistrictName + "</option>");
                    }
                }


            }
            GetAddreesSpan();
        }
    })

};

function GetAddreesSpan() {


}




 

2、后端C#代码

<%@ WebHandler Language="C#" Class="CityAreas" %>

using System;
using System.Web;
using System.Collections.Generic;

public class CityAreas : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        if (context.Request["type"] == "city")
        {
            context.Response.Write(select2(context.Request["provinceID"]));
        }
        else if (context.Request["type"] == "district")
        {
            context.Response.Write(select3(context.Request["cityID"]));
        }
    }


    public string select2(string id)
    {
        string str = string.Empty;
        if (!string.IsNullOrEmpty(id))
        {
            List<ECS.Model.A_CityAreas> list = new ECS.BLL.A_CityAreas().GetList(null, "deep=2 and ParentID=" + id, null);
            if (list != null && list.Count > 0)
            {
       
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append("[");
                foreach (ECS.Model.A_CityAreas item in list)
                {
                    sb.Append("{");
                    sb.Append("\"CityID\":\"" + item.id + "\",\"CityName\":\"" + item.AreaName + "\",\"IsCOD\":\"" + item.IsCOD + "\"");
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                str = sb.ToString();
            }
           
        }
        return str;
    }

    public string select3(string id)
    {
        string str = string.Empty;
        if (!string.IsNullOrEmpty(id))
        {
            List<ECS.Model.A_CityAreas> list = new ECS.BLL.A_CityAreas().GetList(null, "deep=3 and ParentID=" + id, null);
            if (list != null && list.Count > 0)
            {
              
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append("[");
                foreach (ECS.Model.A_CityAreas item in list)
                {
                    sb.Append("{");
                    sb.Append("\"DistrictID\":\"" + item.id + "\",\"DistrictName\":\"" + item.AreaName + "\",\"IsCOD\":\"" + item.IsCOD + "\"");
                    sb.Append("},");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                str = sb.ToString();
            }
           
        }
        return str;
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}


 

相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
消息中间件 存储 Shell
Docker部署RabbitMQ配置日志映射本地文件
Docker部署RabbitMQ配置日志映射本地文件
681 0
|
JavaScript
第2节:Vue3 模板语法
第2节:Vue3 模板语法
88 0
|
存储 Java 数据格式
|
数据采集 前端开发 数据库
实时动态实现省市区三级联动选择器
实时动态实现省市区三级联动选择器
249 0
|
存储 JavaScript
Vue3使用Pinia获取全局状态变量
Vue3使用Pinia获取全局状态变量
520 4
|
存储 SQL 数据管理
Data Fabric:一站式数据管理与服务
在2023年11月01日云栖大会D区D2-1进行了主题为阿里云瑶池数据库如何助力企业数字化转型与升级的演讲,本文带大家一起了解阿里云数据库生态工具产品部负责人周文超的精彩演讲,内容为《Date Fabric:一站式数据管理与服务》。
98406 5
|
算法 应用服务中间件 网络安全
windows下采用 nginx配置websocket支持wss流程
windows下采用 nginx配置websocket支持wss流程
797 0
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
Linux Python Windows
Bellhop 从入门到上手
Bellhop,是一种水声工具箱,可以进行水下声学仿真,通过 env 文件设置环境参数,可得到与之对应的声线信息、多途等仿真
2238 1
|
SQL 关系型数据库 MySQL
MySQL 的白名单设置网段的步骤及样例
MySQL支持通过白名单设置来限制连接到数据库服务器的IP地址范围。以下是设置MySQL白名单的步骤及样例: 1. 登录到MySQL数据库服务器。 2. 执行以下SQL命令创建一个新的用户,并授予访问权限: ``` CREATE USER 'newuser'@'%' IDENTIFIED BY 'password'; GRANT ALL PRIVILEGES ON *.* TO 'newuser'@'%'; FLUSH PRIVILEGES; ``` 注意:将`newuser`替换为您要创建的用户名,`password`替换为您要为用户设置的密码。 3.
1679 0