基于easyui 框架，通过读取json 文件实现省市区三联动的效果

最新推荐文章于 2018-12-21 20:58:42 发布

vivian_hnd

最新推荐文章于 2018-12-21 20:58:42 发布

阅读量2.2k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/vivian_wang07/article/details/78553176

版权

本文介绍如何在EasyUI框架下，通过读取JSON文件实现省市区三联动的效果。首先加载省份，接着根据选中的省份动态加载对应城市，再根据省份和城市选择加载相应区县。详细步骤包括解析JSON文件、引入资源、编写HTML和JS脚本，最后提供演示示例的下载链接。

摘要由CSDN通过智能技术生成

由于项目需要，我们项目是用的easyui 的框架，然后需要用到省市区三联动效果，一般的jQuery 获取json 文件实现三联动效果，不能够满足我们的需求，因为我们select 下拉框都是通过easyui combox 效果来实现的，所以我自己写了一个基于easyui 框架通过读取json 文件实现省市区三联动效果的脚本，废话不多说，开始讲重点：

1.先说一下他实现的思想：
实现三联动效果，看起来很难，其实很简单，只不过是逻辑比较容易绕弯而已。
①：首先先把省份给加载出来
②：通过判断选中的省份的val 的值判断与之相对应的城市，然后把城市一个一个的循环出来就好了
③：通过判断选中的省份的值和选中的城市的值是否与循环中的区县的值是否有对应关系，如果是对应的吧相应的区县的值循环到下拉框中就好了
2.看一下我的json 文件格式是否符合你的需要

[
    {
        "code": "11", 
        "name": "北京市", 
        "childs": [
            {
                "code": "1101", 
                "name": "市辖区", 
                "childs": [
                    {
                        "code": "110101", 
                        "name": "东城区"
                    }, 
                    {
                        "code": "110102", 
                        "name": "西城区"
                    }, 
                    {
                        "code": "110119", 
                        "name": "延庆区"
                    }
                ]
            }
        ]
    }, 
    {
        "code": "12", 
        "name": "天津市", 
        "childs": [
            {
                "code": "1201", 
                "name": "市辖区", 
                "childs": [
                    {
                        "code": "120101", 
                        "name": "和平区"
                    }, 
                    {
                        "code": "120102", 
                        &