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

来源：互联网发布：圆周率网络编辑：程序博客网时间：2024/05/23 14:05

由于项目需要，我们项目是用的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",                         "name": "河东区"                    },                                         {                        "code": "120119",                         "name": "蓟州区"                    }                ]            }        ]    }]

3.引入js css

<link rel="stylesheet" href="easyui.css" /><link rel="stylesheet" href="style.css" /><script src="jquery-1.8.0.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js" ></script>

4.HTML代码

<table class="table01" border="0" cellspacing="0" cellpadding="0">　　<tbody><tr>　　　　<td>　　　　           <span>省份：</span>　　　　　　<select id="province" name="province"  class="easyui-combobox" style="width:200px;">　　　　　　　　　　　　　　</select>　　　　</td>　　</tr>　　<tr>　　　　<td>        <span>城市</span>：　　　　　　<select id="citys" name="city" class="easyui-combobox" style="width:200px;">　　　　　　　　　　　　　　</select>　　　　</td>　　</tr>　　<tr>　　　　<td>        <span>区县：</span>　　　　　　<select id="county" name="county" class="easyui-combobox" style="width:200px;">　　　　　　　　　　　　　　</select>　　　　</td>　　</tr></tbody></table>

5.js脚本

showPro();    function showPro(){        $.ajax({            url : 'pca-code.json',             dataType: 'json',               success: function (jsonstr) {                  jsonstr.unshift({                      'code': '',                      'name': '请选择省份..'                  });                $('#province').combobox({                    data: jsonstr,                      valueField:'code',                    textField:'name',                    editable:false,                    onLoadSuccess:function (data){                        var data = $('#province').combobox('getData');                                         //console.log(JSON.stringify(data))                        if(data.length>0){                            $('#province').combobox('select',data[0].code);                        }                    },                    onChange : function(newValue, oldValue) {                                   if (newValue) {                            showCity(newValue)                            $("#citys").combobox("clear")                            $("#county").combobox("clear")                                         }                    }                });             }        });    }    function showCity(newValue){                        $.ajax({             url : 'pca-code.json',             dataType: 'json',               success: function (json) {                var cityJson = json;                //console.log(JSON.stringify(cityJson))                $.each(cityJson, function(i, val) {                    if(val.code == newValue){ //判断省份的code 是否与省份的val 相同                        //console.log(JSON.stringify(val))                        val.childs.unshift({                              'code': '',                              'name': '请选择城市..'                          });                        $('#citys').combobox({                            data: val.childs,                              valueField:'code',                            textField:'name',                            editable:false,                            onLoadSuccess:function (data){                                var data = $('#citys').combobox('getData');                                                    //console.log(JSON.stringify(data))                                if(data.length>0){                                    $('#citys').combobox('select',data[0].code);                                }                            },                            onChange : function(newValue, oldValue) {                                //console.log(newValue, oldValue)                                if (newValue) {                                                 showCounty(String(newValue))                                }                            }                                                   });                    }                })                           }        })              }    function showCounty(newValue){        $.ajax({             url : 'pca-code.json',             dataType: 'json',               success: function (json) {                var cityJson = json;                $.each(cityJson, function(i, val) {                    if(val.code == newValue.substr(0, 2)){                        var pro_childs =  val.childs;                        $.each(pro_childs, function(j, proVal) {// 然后 省份循环 寻找与省份对应的城市                            if(proVal.code == newValue){ //判断省份的code 是否与省份的val 相同                                proVal.childs.unshift({                                      'code': '',                                      'name': '请选择区/县..'                                  });                                $('#county').combobox({                                    data: proVal.childs,                                      valueField:'code',                                    textField:'name',                                    editable:false,                                    onLoadSuccess:function (data){                                        var data = $('#county').combobox('getData');                                                           //console.log(JSON.stringify(data))                                        if(data.length>0){                                            $('#county').combobox('select',data[0].code);                                        }                                    }                                });                            }                        })                    }                })                           }        })              }

6.然后形成的效果就是这个样子的
这里写图片描述

7：不懂的可以去百度云盘下载我写的demo效果（密码：515z）
百度云盘链接

阅读全文

0 0