Ajax、PHP、mysql实现城市的三级联动
我们经常见到以下网页的效果:
那么这种三级联动效果如何实现？废话不多说直接上代码！
数据库设计如下（这里仅以北京市为例）:
DROP TABLE IF EXISTS `area`;CREATE TABLE `area` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`code` varchar(255) NOT NULL DEFAULT '' COMMENT '城市编码',`name` varchar(255) NOT NULL DEFAULT '' COMMENT '城市名称',`pid` int(11) NOT NULL DEFAULT '0' COMMENT '上级id',PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=3509 DEFAULT CHARSET=utf8;INSERT INTO `area` VALUES ('1', '110000', '北京市', '0');INSERT INTO `area` VALUES ('2', '110100', '市辖区', '1');INSERT INTO `area` VALUES ('3', '110101', '东城区', '2');INSERT INTO `area` VALUES ('4', '110102', '西城区', '2');INSERT INTO `area` VALUES ('5', '110105', '朝阳区', '2');INSERT INTO `area` VALUES ('6', '110106', '丰台区', '2');INSERT INTO `area` VALUES ('7', '110107', '石景山区', '2');INSERT INTO `area` VALUES ('8', '110108', '海淀区', '2');INSERT INTO `area` VALUES ('9', '110109', '门头沟区', '2');INSERT INTO `area` VALUES ('10', '110111', '房山区', '2');INSERT INTO `area` VALUES ('11', '110112', '通州区', '2');INSERT INTO `area` VALUES ('12', '110113', '顺义区', '2');INSERT INTO `area` VALUES ('13', '110114', '昌平区', '2');INSERT INTO `area` VALUES ('14', '110115', '大兴区', '2');INSERT INTO `area` VALUES ('15', '110116', '怀柔区', '2');INSERT INTO `area` VALUES ('16', '110117', '平谷区', '2');INSERT INTO `area` VALUES ('17', '110118', '密云区', '2');INSERT INTO `area` VALUES ('18', '110119', '延庆区', '2');
后端处理
//接收pid参数，默认找省份 pid = 0
$pid = isset($_POST['pid']) ? intval($_POST['pid']) : 0;
//查询省份信息
$pdo = new PDO('mysql:dbname=你自己的', '你自己的', '你自己的');
//sql语句
$sql = "select * from area where pid=$pid";
//执行sql查询语句
$statement = $pdo->query($sql);
//获取所有结果
$data = $statement->fetchAll();
//返回json格式字符串
echo json_encode($data);
前端（这里js部分自己细细揣摩，注释很详细）
<body>
<select id="province" style="width:150px">
<option value="">请选择省份</option>
</select>
<select id="city" style="width:150px">
<option value="">请选择城市</option>
</select>
<select id="area" style="width:150px">
<option value="">请选择地区</option>
</select>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
//发送ajax请求，获取省份信息
ajax('post', 'xxx.php', '', function(res){
// console.log(res);return;
//转化为json对象
var json = JSON.parse(res);
//循环，取出每一条数据，拼接option标签
var html = '<option value="">请选择省份</option>';
for(var i=0; i<json.length; ++i){
html += '<option value="' + json[i].id + '">'+ json[i].name +'</option>';
}
//将拼接的html字符串显示到页面 显示到省份下拉列表
document.getElementById('province').innerHTML = html;
});
//给省份下拉列表绑定change事件
document.getElementById('province').onchange = function(){
//将城市下拉列表还原
document.getElementById('city').innerHTML = '<option value="">请选择城市</option>';
//将地区下拉列表还原
document.getElementById('area').innerHTML = '<option value="">请选择地区</option>';
//获取到选中的省份的id
var pid = this.value;
if(pid == ''){
return;
}
//发送ajax请求，查询省份下的城市
ajax('post', 'xxx.php', 'pid=' + pid, function(res){
//转化为json对象
var json = JSON.parse(res);
//循环，取出每一条数据，拼接option标签
var html = '<option value="">请选择城市</option>';
for(var i=0; i<json.length; ++i){
html += '<option value="' + json[i].id + '">'+ json[i].name +'</option>';
}
//将拼接的html字符串显示到页面 城市的下拉列表
document.getElementById('city').innerHTML = html;
});
}
//给城市下拉列表绑定change事件
document.getElementById('city').onchange = function(){
//将地区下拉列表还原
document.getElementById('area').innerHTML = '<option value="">请选择地区</option>';
//获取选中的城市
var pid = this.value;
if(pid == ''){
return;
}
//发送ajax请求
ajax('post', 'xxx.php', 'pid=' + pid, function(res){
//转化为json格式对象
var json = JSON.parse(res);
//遍历数据，拼接option标签
var html = '<option value="">请选择地区</option>';
for(var i=0; i<json.length; ++i){
html += '<option value="' + json[i].id + '">' + json[i].name + '</option>'
}
//将拼接好的html代码 显示到页面 地区的下拉列表
document.getElementById('area').innerHTML = html;
});
}
}
</script>
</body>