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

简介: 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;
        }
    }

}


 

相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
JSON 前端开发 JavaScript
AJAX完成三级级下拉联动【省份-城市-区域】
AJAX应用案例--基于mysql,以POST方式,用DOM对象,完成三级级下拉联动【省份-城市-区域】,效果图如下: 数据库如下: 省份                        ...
1083 0
|
7月前
|
数据采集 前端开发 数据库
实时动态实现省市区三级联动选择器
实时动态实现省市区三级联动选择器
110 0
|
存储 JSON JavaScript
Vue中如何进行表单地区选择与级联联动
Vue中如何进行表单地区选择与级联联动
|
JSON 数据格式 JavaScript
省市区三级菜单联动插件
前言 这里分享一个博主写的省市区三级菜单联动插件 — jQuery-Citys,此插件中所有省市区数据均为国家行政区划代码,保证数据真实可靠,插件可以根据默认地区代码或地区名称进行值的初始化操作。
2924 0
|
JavaScript Java 数据库连接
省市区 - 三级联动通用化模块组件
都说我们要做模块化设计,而不要做功能化设计 什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行 什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高   今天写了一个省市区三级联动的模...
1555 0
|
前端开发 搜索推荐 JavaScript
|
7月前
|
SQL 缓存 JSON
vue利用级联选择器实现全国省市区乡村五级菜单联动
vue利用级联选择器实现全国省市区乡村五级菜单联动
|
7月前
|
数据采集 前端开发 数据库
省市区三级联动后台接口调用与数据预处理
省市区三级联动后台接口调用与数据预处理
310 0