不操作資料庫,js解析json三級聯動
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" onchange="province(this)">
<option value="">--請選擇--</option>
</select>
城市<select id="city" onchange="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>