1. 程式人生 > >不操作資料庫,js解析json三級聯動

不操作資料庫,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>