数据表省市区三级联动
在工作中，老是会遇到地址三级关联，公司（外包）给了要求是能使用插件的绝不要自己写，美其名曰：不要重复造轮子。我的想法是：你得知道轮子是怎么造的，才不去做重复性肉鸡行为。
所以自己就写了一个。
sql国家地址表：http://pan.baidu.com/s/1gfslGkV
用到的东西:jquery,php,thinkphp框架和一张国家地区表
前台模板页面 index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<title>登陆测试</title>
</head>
<body>
<select name="sheng" id="sheng">
<option value="请选择所在省份">请选择所在省份</option>
<volist name="sheng" id="vo1">
<option value="{$vo1.region_id}" id="sheng">{$vo1.region_name}</option>
</volist>
</select>
<select name="city" id="city" style="display: none;">
</select>
<select name="xian" id="xian" style="display: none;">
</select>
<script>
$(function () {
$('#sheng').change(function () {
//省份更改后，城市，县城的情况都要被全部更新（先清除，再添加）
$("#city").css('display','none');
$("#city").children().remove(); //去除原来的城市列表
$("#xian").css('display','none');
$("#xian").children().remove(); //去除原来的县级列表
var value = this.value; //获取省份value作为城市的parent_id
var url = '__CONTROLLER__/region';
$.ajax({ //jquery ajax
type:'post',
url:url,
data:{'value':value},
success:function (data) {
var result = JSON.parse(data);
//为了防止直辖市情况下，change条件无法触发
$("#city").append("<option value='请选择所在城市'>请选择所在城市</option>");
for(var i = 0;i < result.length;i ++){
/*循环添加所有城市列表*/
$("#city").append("<option value='"+result[i].region_id+"'>"+result[i].region_name+"</option>");
$("#city").css('display','inline');
}
}
});
});
/*同上*/
$('#city').change(function () {
//城市更改后，更新县级数据
$("#xian").css('display','none');
$("#xian").children().remove();
//这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
var valueCity = this.value;
var urlCity = '__CONTROLLER__/region';
$.ajax({
type:'post',
url:urlCity,
data:{'value':valueCity},
success:function (data) {
var result = JSON.parse(data);
for(var i = 0;i < result.length;i ++){
/*alert(result[i].region_id + ' '+result[i].region_name);*/
$("#xian").append("<option value='"+result[i].region_id+"'>"+result[i].region_name+"</option>");
$("#xian").css('display','inline');
}
}
})
});
});
</script>
</body>
</html>
后台是使用的thinkphp框架
<?php
namespace HomeController;
use ThinkController;
class RegionController extends Controller
{
public function index(){
$region = M('region');
$condition['parent_id'] = 1;
$sheng = $region->where($condition)->select();
$this->assign('sheng',$sheng);
$this->display();
}
public function region(){
if (IS_AJAX){
$region = M('region');
$condition['parent_id'] = $_POST['value'];
$city = $region->where($condition)->select();
echo json_encode($city);
}
}
}
这样就实现了三级联动，希望自己以后，不要成为码农，要懂得思考。