1.后台转换成json写入js文件
public function index()
{
// region_type 1 省份 2 城市 3 区县
// 获取省 一维数组
$arr1 = DB::table('region')->where('region_type',1)->get();
foreach($arr1 as $k => $v){
if($v->parent_id == 1){
$province[$v->region_id] = $v->region_name;
}
}
// print_R($province);die;
//获取城市
$arr2 = DB::table('region')->where('region_type',2)->get();
foreach($arr2 as $k => $v){
foreach($province as $kk => $vv){
// $a[$v->region_id] = $v->region_name;
if($v->parent_id == $kk){
$city[$kk][$v->region_id] = $v->region_name;
$cityId[$v->region_id] = $v->region_id;
}
}
}
// print_r($city);die;
//获取县城
$arr3 = DB::table('region')->where('region_type',3)->get();
foreach($arr3 as $k => $v){
foreach($cityId as $kk => $vv){
if($v->parent_id == $vv){
$area[$kk][$v->region_id] = $v->region_name;
}
}
}
// print_R($area);die;
$country['province'] = $province;
$country['city'] = $city;
$country['area'] = $area;
// print_R($country);die;
$filename = "area.js";
file_put_contents($filename,"var json=".json_encode($country));
return view('admin/Area');
}
2.前台html代码
省份<select id="province" οnchange="province(this)">
<option value="">--请选择--</option>
</select>
城市<select id="city" οnchange="city(this)">
<option value="">--请选择--</option>
</select>
区/县<select id="area">
<option value="">--请选择--</option>
</select>
3.js代码
<script src="{{URL::asset('/')}}area.js"></script><script src="js/ jQuery.js"></script>
<script>
var json = eval(json);
var str = '<option value="">--请选择--</option>';
for(i in json.province){
str += '<option value="'+i+'">'+json.province[i]+'</option>';
}
$("#province").html(str);
$("#city").html('<option value="">--请选择--</option>');
//根据省份查询出城市
function province(p_id){
var p_id = $(p_id).val();
var st = '<option value="">--请选择--</option>';
for( a in json.city[p_id]){
st += '<option value="'+a+'">'+json.city[p_id][a]+'</option>';
}
$("#city").html(st);
$("#area").html('<option value="">--请选择--</option>');
}
// 根据城市查询出区/县
function city(c_id){
var c_id = $(c_id).val();
var sr = '<option value="">--请选择--</option>';
for( a in json.area[c_id]){
sr += '<option value="'+a+'">'+json.area[c_id][a]+'</option>';
}
$("#area").html(sr);
}
</script>