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

本文涉及的产品
云服务器 ECS,每月免费额度280元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: 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;
        }
    }

}


 

相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
1月前
|
SQL 缓存 JSON
vue利用级联选择器实现全国省市区乡村五级菜单联动
vue利用级联选择器实现全国省市区乡村五级菜单联动
45 0
|
3月前
|
小程序 前端开发
实现微信小程序picker 省市区 自定义数据 支持三级联动
实现微信小程序picker 省市区 自定义数据 支持三级联动
103 0
|
7月前
|
存储 JSON JavaScript
Vue中如何进行表单地区选择与级联联动
Vue中如何进行表单地区选择与级联联动
|
11月前
|
JSON 小程序 数据库
微信小程序实现时间轴和地区列表的功能
微信小程序实现时间轴和地区列表的功能
180 0
|
小程序 开发者
微信小程序中如何实现省市区街道四级地址级联选择
微信小程序中如何实现省市区街道四级地址级联选择
1894 0
微信小程序中如何实现省市区街道四级地址级联选择
|
存储
好客租房136-获取当前定位数据并渲染到列表中
好客租房136-获取当前定位数据并渲染到列表中
97 0
|
索引
好客租房147-渲染(渲染右侧索引列表
好客租房147-渲染(渲染右侧索引列表
81 0
好客租房147-渲染(渲染右侧索引列表
|
前端开发
好客租房36-表单处理(3受控组件的示例)
好客租房36-表单处理(3受控组件的示例)
64 0
好客租房36-表单处理(3受控组件的示例)
好客租房156-封装顶部导航栏组件(3功能处理withRouter)
好客租房156-封装顶部导航栏组件(3功能处理withRouter)
96 0
好客租房156-封装顶部导航栏组件(3功能处理withRouter)
好客租房155-封装顶部导航栏组件(2样式调整)
好客租房155-封装顶部导航栏组件(2样式调整)
58 0
好客租房155-封装顶部导航栏组件(2样式调整)