Easyui form combobox省市区三级联动可以帮助用户快速选择省市区的信息，提供了良好的用户体验。下面我们来详细讲解该功能的完整攻略。
实现步骤
第一步：引入EasyUI资源文件和jQuery库文件
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.9/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.9/themes/icon.css"/>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.9/jquery.easyui.min.js"></script>
第二步：定义三个下拉框
<input id="province" class="easyui-combobox" data-options="url:'getProvince.php',valueField:'id',textField:'name',onSelect:function(rec){}">
<input id="city" class="easyui-combobox" data-options="url:'getCity.php',valueField:'id',textField:'name',onSelect:function(rec){}">
<input id="district" class="easyui-combobox" data-options="url:'getDistrict.php',valueField:'id',textField:'name'">
第三步：编写三个数据源
getProvince.php
<?php
$data = array(
array('id'=>'1','name'=>'北京'),
array('id'=>'2','name'=>'上海'),
array('id'=>'3','name'=>'天津'),
array('id'=>'4','name'=>'重庆'),
array('id'=>'5','name'=>'河北'),
array('id'=>'6','name'=>'山西'),
array('id'=>'7','name'=>'辽宁'),
array('id'=>'8','name'=>'吉林'),
array('id'=>'9','name'=>'黑龙江'),
array('id'=>'10','name'=>'江苏'),
array('id'=>'11','name'=>'浙江'),
array('id'=>'12','name'=>'安徽'),
array('id'=>'13','name'=>'福建'),
array('id'=>'14','name'=>'江西'),
array('id'=>'15','name'=>'山东'),
array('id'=>'16','name'=>'河南'),
array('id'=>'17','name'=>'湖北'),
array('id'=>'18','name'=>'湖南'),
array('id'=>'19','name'=>'广东'),
array('id'=>'20','name'=>'广西'),
array('id'=>'21','name'=>'海南'),
array('id'=>'22','name'=>'四川'),
array('id'=>'23','name'=>'贵州'),
array('id'=>'24','name'=>'云南'),
array('id'=>'25','name'=>'西藏'),
array('id'=>'26','name'=>'陕西'),
array('id'=>'27','name'=>'甘肃'),
array('id'=>'28','name'=>'青海'),
array('id'=>'29','name'=>'宁夏'),
array('id'=>'30','name'=>'新疆'),
);
echo json_encode($data);
?>
getCity.php
<?php
$pid = $_GET['id'];
$data = array();
switch ($pid) {
case '1':
$data = array(
array('id'=>'11','name'=>'北京市')
);
break;
case '2':
$data = array(
array('id'=>'21','name'=>'上海市')
);
break;
case '3':
$data = array(
array('id'=>'31','name'=>'天津市')
);
break;
case '4':
$data = array(
array('id'=>'41','name'=>'重庆市')
);
break;
case '5':
$data = array(
array('id'=>'51','name'=>'石家庄市'),
array('id'=>'52','name'=>'唐山市'),
array('id'=>'53','name'=>'秦皇岛市')
);
break;
case '6':
$data = array(
array('id'=>'61','name'=>'太原市'),
array('id'=>'62','name'=>'大同市'),
array('id'=>'63','name'=>'阳泉市')
);
break;
case '7':
$data = array(
array('id'=>'71','name'=>'沈阳市'),
array('id'=>'72','name'=>'大连市'),
array('id'=>'73','name'=>'鞍山市')
);
break;
case '8':
$data = array(
array('id'=>'81','name'=>'长春市'),
array('id'=>'82','name'=>'吉林市'),
array('id'=>'83','name'=>'四平市')
);
break;
case '9':
$data = array(
array('id'=>'91','name'=>'哈尔滨市'),
array('id'=>'92','name'=>'齐齐哈尔市'),
array('id'=>'93','name'=>'牡丹江市')
);
break;
case '10':
$data = array(
array('id'=>'101','name'=>'南京市'),
array('id'=>'102','name'=>'无锡市'),
array('id'=>'103','name'=>'徐州市')
);
break;
case '11':
$data = array(
array('id'=>'111','name'=>'杭州市'),
array('id'=>'112','name'=>'宁波市'),
array('id'=>'113','name'=>'温州市')
);
break;
default:
break;
}
echo json_encode($data);
?>
getDistrict.php
<?php
$cid = $_GET['id'];
$data = array();
switch ($cid) {
case '11':
$data = array(
array('id'=>'1101','name'=>'东城区'),
array('id'=>'1102','name'=>'西城区'),
array('id'=>'1103','name'=>'崇文区'),
array('id'=>'1104','name'=>'宣武区'),
array('id'=>'1105','name'=>'朝阳区'),
array('id'=>'1106','name'=>'丰台区'),
array('id'=>'1107','name'=>'石景山区'),
array('id'=>'1108','name'=>'海淀区'),
array('id'=>'1109','name'=>'门头沟区'),
array('id'=>'1110','name'=>'房山区'),
array('id'=>'1111','name'=>'通州区'),
array('id'=>'1112','name'=>'顺义区'),
array('id'=>'1113','name'=>'昌平区'),
);
break;
case '21':
$data = array(
array('id'=>'2101','name'=>'黄浦区'),
array('id'=>'2102','name'=>'卢湾区'),
array('id'=>'2103','name'=>'徐汇区'),
array('id'=>'2104','name'=>'长宁区'),
array('id'=>'2105','name'=>'静安区'),
array('id'=>'2106','name'=>'普陀区'),
array('id'=>'2107','name'=>'闸北区'),
array('id'=>'2108','name'=>'虹口区'),
array('id'=>'2109','name'=>'杨浦区'),
array('id'=>'2110','name'=>'闵行区'),
array('id'=>'2111','name'=>'宝山区'),
array('id'=>'2112','name'=>'嘉定区'),
array('id'=>'2113','name'=>'浦东新区'),
);
break;
case '31':
$data = array(
array('id'=>'3101','name'=>'和平区'),
array('id'=>'3102','name'=>'河东区'),
array('id'=>'3103','name'=>'河西区'),
array('id'=>'3104','name'=>'南开区'),
array('id'=>'3105','name'=>'河北区'),
array('id'=>'3106','name'=>'红桥区'),
array('id'=>'3107','name'=>'塘沽区'),
array('id'=>'3108','name'=>'汉沽区'),
array('id'=>'3109','name'=>'大港区'),
array('id'=>'3110','name'=>'东丽区'),
array('id'=>'3111','name'=>'西青区'),
array('id'=>'3112','name'=>'津南区'),
array('id'=>'3113','name'=>'北辰区'),
array('id'=>'3114','name'=>'武清区'),
array('id'=>'3115','name'=>'宝坻区'),
);
break;
case '41':
$data = array(
array('id'=>'4101','name'=>'渝中区'),
array('id'=>'4102','name'=>'大渡口区'),
array('id'=>'4103','name'=>'江北区'),
array('id'=>'4104','name'=>'南岸区'),
array('id'=>'4105','name'=>'北碚区'),
array('id'=>'4106','name'=>'渝北区'),
array('id'=>'4107','name'=>'巴南区'),
array('id'=>'4108','name'=>'长寿区'),
array('id'=>'4109','name'=>'双桥区'),
array('id'=>'4110','name'=>'沙坪坝区'),
array('id'=>'4111','name'=>'万盛区'),
array('id'=>'4112','name'=>'万州区'),
array('id'=>'4113','name'=>'涪陵区'),
array('id'=>'4114','name'=>'黔江区'),
array('id'=>'4115','name'=>'永川区'),
array('id'=>'4116','name'=>'合川区'),
array('id'=>'4117','name'=>'江津区'),
array('id'=>'4118','name'=>'九龙坡区'),
array('id'=>'4119','name'=>'南川区'),
array('id'=>'4120','name'=>'綦江县'),
array('id'=>'4121','name'=>'潼南县'),
array('id'=>'4122','name'=>'铜梁县'),
array('id'=>'4123','name'=>'大足县'),
array('id'=>'4124','name'=>'荣昌县'),
array('id'=>'4125','name'=>'璧山县'),
array('id'=>'4126','name'=>'垫江县'),
array('id'=>'4127','name'=>'丰都县'),
array('id'=>'4128','name'=>'忠县'),
array('id'=>'4129','name'=>'开县'),
array('id'=>'4130','name'=>'云阳县'),
array('id'=>'4131','name'=>'奉节县'),
array('id'=>'4132','name'=>'巫山县'),
array('id'=>'4133','name'=>'巫溪县'),
array('id'=>'4134','name'=>'石柱土家族自治县'),
array('id'=>'4135','name'=>'秀山土家族苗族自治县'),
array('id'=>'4136','name'=>'酉阳土家族苗族自治县'),
array('id'=>'4137','name'=>'彭水苗族土家族自治县'),
);
break;
case '51':
$data = array(
array('id'=>'5101','name'=>'长安区'),
array('id'=>'5102','name'=>'桥西区'),
array('id'=>'5103','name'=>'新华区'),
array('id'=>'5104','name'=>'井陉矿区'),
array('id'=>'5105','name'=>'裕华区'),
array('id'=>'5106','name'=>'藁城区'),
array('id'=>'5107','name'=>'鹿泉区'),
array('id'=>'5108','name'=>'栾城区'),
array('id'=>'5109','name'=>'井陉县'),
array('id'=>'5110','name'=>'正定县'),
array('id'=>'5111','name'=>'行唐县'),
array('id'=>'5112','name'=>'灵寿县'),
array('id'=>'5113','name'=>'高邑县'),
array('id'=>'5114','name'=>'深泽县'),
array('id'=>'5115','name'=>'赞皇县'),
array('id'=>'5116','name'=>'无极县'),
array('id'=>'5117','name'=>'平山县'),
array('id'=>'5118','name'=>'元氏县'),
array('id'=>'5119','name'=>'赵县'),
);
break;
case '52':
$data = array(
array('id'=>'5201','name'=>'路南区'),
array('id'=>'5202','name'=>'路北区'),
array('id'=>'5203','name'=>'古冶区'),
array('id'=>'5204','name'=>'开平区'),
array('id'=>'5205','name'=>'丰南区'),
array('id'=>'5206','name'=>'丰润区'),
array('id'=>'5207','name'=>'滦县'),
array('id'=>'5208','name'=>'滦南县'),
array('id'=>'5209','name'=>'乐亭县'),
array('id'=>'5210','name'=>'迁西县'),
array('id'=>'5211','name'=>'玉田县'),
array('id'=>'5212','name'=>'唐海县'),
array('id'=>'5213','name'=>'遵化市'),
array('id'=>'5214','name'=>'迁安市'),
);
break;
case '53':
$data = array(
array('id'=>'5301','name'=>'海港区'),
array('id'=>'5302','name'=>'山海关区'),
array('id'=>'5303','name'=>'北戴河区'),
array('id'=>'5304','name'=>'青龙满族自治县'),
array('id'=>'5305','name'=>'昌黎县'),
array('id'=>'5306','name'=>'抚宁县'),
array('id'=>'5307','name'=>'卢龙县'),
);
break;
default:
break;
}
echo json_encode($data);
?>
第四步：实现省市区三级联动
$(function(){
$('#province').combobox({
onSelect:function(rec){
var url = 'getCity.php?id='+rec.id;
$('#city').combobox('clear').combobox('reload', url);
$('#district').combobox('clear');
}
});
$('#city').combobox({
onSelect:function(rec){
var url = 'getDistrict.php?id='+rec.id;
$('#district').combobox('clear').combobox('reload', url);
}
});
});
示例
示例一：全国省市区三级联动
以下是一个全国省市区三级联动示例，你可以查看和体验该功能。在省、市、区三级下拉框中选择对应选项，可以动态联动加载下级选项。
```html
