时间:2021-07-01 10:21:17 帮助过:2人阅读
之前每次要用地区联动基本都是用的其他人写好的js做的多级联动,但是发现最大的缺点就是地区信息太老,而且不方便更新。
今天在网上搜索到2015年最新的国家地域信息数据,就打算用数据库配合ajax来做联动,后台也可以很方便的进行数据更新
代码1(jquery代码,负责ajax数据联动前段):
<divclass="form-group"><labelfor="province">省份label><selectclass="form-control"id="province"name="province"><optionvalue ="" >option>
//volist 是thinkphp的标签,这里我用thinkphp框架写的代码,自动载入省级地区信息
<volistname="province"id="vo"><optionvalue ="{$vo.class_id}" >{$vo.class_name}option>volist>select><labelfor="city">城市label><selectclass="form-control"id="city"name="city">select><labelfor="county">县区label><selectclass="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操作方法// 添加 functioncol_add(id,data) {var selObj = $("#"+id);
for (var i=0;i" +data[i].class_name+"");
}
}
// 删除 functioncol_delete() {var selOpt = $("#mySelect option:selected");
selOpt.remove();
}
// 清空 functioncol_clear(id) {var selOpt = $("#"+id+" option");
selOpt.remove();
}
script>
代码2(php后端数据判断交互代码,基于thinkphp写的,如果是其他框架,原理也是一样的,代码会有些小差入):
publicfunctionajax(){$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数据库下载
以上就介绍了基于数据库、php、ajax的 3级地区联动,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。