之前每次要用地区联动基本都是用的其他人写好的js做的多级联动,但是发现最大的缺点就是地区信息太老,而且不方便更新。
今天在网上搜索到2015年最新的国家地域信息数据,就打算用数据库配合ajax来做联动,后台也可以很方便的进行数据更新
代码1(jquery代码,负责ajax数据联动前段):
<div class="form-group">
<label for="province">省份</label>
<select class="form-control" id="province" name="province">
<option value ="" ></option>
//volist 是thinkphp的标签,这里我用thinkphp框架写的代码,自动载入省级地区信息
<volist name="province" id="vo">
<option value ="{$vo.class_id}" >{$vo.class_name}</option>
</volist>
</select>
<label for="city">城市</label>
<select class="form-control" id="city" name="city">
</select>
<label for="county">县区</label>
<select class="form-control" id="county" name="county">
</select>
</div>
<script>
$(document).ready(function(){
//省数据变动
$("#province").change(function(){
$.post('/Home/Creat/ajax', {province:$("#province").val()},
function(data){
//alert('成功post回数据');
if(data.info == 'ok') {
//返回ok,将市下拉框赋值
//alert(data.content);
col_clear('city');
col_add('city',data.content);
$("#city").change();
} else {
alert(data.info);
}
}, 'json').error(function(){
alert("网络连接错误,请稍后再试");
});
});
//市数据变动
$("#city").change(function(){
$.post('/Home/Creat/ajax', {city:$("#city").val()},
function(data){
if(data.info == 'ok') {
col_clear('county');
col_add('county',data.content);
} else {
alert(data.info);
}
}, 'json').error(function(){
alert("网络连接错误,请稍后再试");
});
});
});
//select操作方法
// 添加
function col_add(id,data) {
var selObj = $("#"+id);
for (var i=0;i<data.length;i++)
{
selObj.append("<option value='"+data[i].class_id+"'>"+data[i].class_name+"</option>");
}
}
// 删除
function col_delete() {
var selOpt = $("#mySelect option:selected");
selOpt.remove();
}
// 清空
function col_clear(id) {
var selOpt = $("#"+id+" option");
selOpt.remove();
}
</script>
代码2(php后端数据判断交互代码,基于thinkphp写的,如果是其他框架,原理也是一样的,代码会有些小差入):
public function ajax(){
$city = M('city');
if(!IS_AJAX){
$this->ajaxReturn(array(
'info' => '非法的请求方式'
));
}
//如果提交过来的是省份改变
if(I('post.province',0,'intval')){
$filter = array(
'class_parent_id' => I('post.province',0,'intval'),
'class_type' => 2
);
$data['content'] = $city->where($filter)->select();
$data['info'] = 'ok';
}
//如果提交过来的是城市改变
if(I('post.city',0,'intval')){
$filter = array(
'class_parent_id' => I('post.city',0,'intval'),
'class_type' => 3
);
$data['content'] = $city->where($filter)->select();
$data['info'] = 'ok';
}
$this->ajaxReturn($data);
}
最后是数据库,贡献下自己的数据库,根据2015年1月国家公布的地区信息写的,是最新的。
sql数据库下载