layui 地區三級聯動

記錄一下：

HTML代碼示例：

<form class="layui-form" action="" method="post" target="hidden_iframe">
	<div class="city">
		<div class="layui-input-inline">
			<select name="provid" id="provid" lay-filter="provid">
				<option value="">請選擇省</option>
				<option>北京市</option>
				<option>天津市</option>
				<option>上海市</option>
				<option>重慶市</option>
				<option>河北省</option>
				<option>吉林省</option>
				<option>山東省</option>
				<option>福建省</option>
				<option>海南省</option>
				<option>廣東省</option>
				<option>山西省</option>
				<option>甘肅省</option>
				<option>臺灣省</option>
				<option>江蘇省</option>
				<option>河南省</option>
				<option>安徽省</option>
				<option>湖南省</option>
				<option>湖北省</option>
				<option>黑龍江省</option>
				<option>青海省</option>
				<option>江西省</option>
				<option>遼寧省</option>
				<option>陝西省</option>
				<option>四川省</option>
				<option>浙江省</option>
				<option>貴州省</option>
				<option>雲南省</option>
				<option>內蒙古自治區</option>
				<option>廣西壯族自治區</option>
				<option>寧夏回族自治區</option>
				<option>西藏自治區</option>
				<option>新疆維吾爾自治區</option>
				<option>香港特別行政區</option>
				<option>澳門特別行政區</option>
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="cityid" id="cityid" lay-filter="cityid">
				<option value="">請選擇市</option>
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="areaid" id="areaid" lay-filter="areaid">
				<option value="">請選擇縣/區</option>
			</select>
		</div>	
	</div>
	<input type="text" name="address" placeholder="請輸入詳細地址"/>
	<button class="btn" style="border:none;">保存</button>
</form>
<iframe name="hidden_iframe" style="display:none;"></iframe><!-- iframe層 -->

JS代碼示例：

//JavaScript代碼區域
layui.use(['element', 'table', 'form'], function () {
	var element = layui.element,
		table = layui.table
		, form = layui.form

	// 選擇省
	form.on('select(provid)', function(data){
		layer.load(1);//加載中
		var p1=data.value;
		$.ajax({
			url: "/index/index/get_area_info",
			type: 'POST',
			async: true,
			data: {p1:p1},
			success: function (datas) {
				var data = JSON.parse(datas);
				$("#cityid").empty();
				$("#areaid").empty();
				$("#cityid").append('<option>請選擇市</option>');
				$("#areaid").append('<option>請選擇縣/區</option>');
				$("#cityid").append(data.option);
				form.render('select');
				layer.closeAll('loading');
			}
		});
	});
	// 選擇市
	form.on('select(cityid)', function(data){
		layer.load(1);
		var p1=data.value;
		$.ajax({
			url: "/index/index/get_area_info",
			type: 'POST',
			async: true,
			data: {p1:p1},
			success: function (datas) {
				var data = JSON.parse(datas);
				$("#areaid").empty();
				$("#areaid").append('<option>請選擇縣/區</option>');
				$("#areaid").append(data.option);
				form.render('select');
				layer.closeAll('loading');
			}
		});
	});
	// 選擇縣
	form.on('select(areaid)', function(data){
		var p1=data.value;
	});
	
	// 提交表單顯示加載狀態
	$('form').submit(function () {
		layer.load(1)
	});
	
})

PHP代碼示例：

	//獲取區域信息 需引入queryArea.php文件
	public function get_area_infoOp(){
		if(request()->ispost() && request()->isajax()) { 
			$key = '123456789000123456';
			$keywords=input('p1');
			$data=[
				'keywords='.$keywords.'',
				'subdistrict=1',
				'key='.$key.'',
			];
			$sysvalue='三級聯動';
			$queryArea=new queryArea();
			$result=$queryArea->getAreaInfo($data,$sysvalue);
			$html='';
			if($result['status']==1 && $result['info']=='OK' && $result['infocode']=='10000'){
				foreach($result['districts'] as $row){
					foreach($row['districts'] as $son){
						$html.='<option>'.$son['name'].'</option>';
					}
				}
				$array = array('status'=>'success','msg'=>'信息不存在','option'=>$html);
				return json_encode($array);
			}else{
				$array = array('status'=>'success','msg'=>'信息不存在','option'=>$html);
				return json_encode($array);
			}
		}
	}

queryArea.php

<?php
namespace queryAreaInfo;
class queryArea{
    //發送
    private function sendData($dataStr,$yanzhang){
	$url = 'http://restapi.amap.com/v3/config/district?';	//獲取url
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS,$dataStr);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
		curl_setopt($ch, CURLOPT_TIMEOUT, 30);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,false);
        curl_setopt($ch, CURLOPT_URL,$url);
        //設置獲取的信息以文件流的形式返回，而不是直接輸出。  
        curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
        //返回值賦值給$result
        $result = curl_exec($ch);
        //調試整套請求代碼
        //釋放      
        curl_close($ch);
        $result = json_decode($result,true);
        return $result;
    }
	//獲取地區信息
    public function getAreaInfo($data,$yanzhang){
		$dataStr = implode('&',$data);
        return $this->sendData($dataStr,$yanzhang);
    }
	
}

效果圖示：