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

由于项目需要，我们项目是用的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）

百度云盘链接