视图层
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</script>
</head>
<body>
<select class="province">
<option value="0">==请选择省==</option>
@foreach($province as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
<select class="city">
<option value="0">==市==</option>
</select>
<select class="area">
<option value="0">==区/县==</option>
</select>
</body>
</html>
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script >
var ue = UE.getEditor('my',{
initialFrameHeight:300,
initialFrameWidth:800
});
</script>
<script type="application/javascript">
$(function() {
//当省选项值发生变化的时候,发送ajax请求,获取对应的市区信息,并渲染
$('.province').change(function() {
var province = $(this).val();
$.ajax({
//请求方式
type: "get",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "city",
//数据,json字符串
data: {
"province": province
},
//请求成功
dataType: "json",
success: function(result) {
//console.log(result)
if (result.status == 0) {
var citys = result.data;
var optionstr = "<option value='0'>==市==</option>";
//渲染city选择框
for (var i = 0; i < citys.length; i++) {
var city = citys[i];
optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
}
$('.city').html(optionstr);
} else {
alert(result.message);
}
},
//请求失败,包含具体的错误信息
error: function(e) {
console.log(e.status);
console.log(e.responseText);
}
});
})
$('.city').change(function() {
var city = $(this).val();
console.log(city);
$.ajax({
//请求方式
type: "get",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "area",
//数据,json字符串
data: {
"city": city
},
//请求成功
dataType: "json",
success: function(result) {
//console.log(result)
if (result.status == 0) {
var cityss = result.data;
var optionstr = "<option value='0'>==市==</option>";
//渲染city选择框
for (var i = 0; i < cityss.length; i++) {
var city = cityss[i];
optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
}
$('.area').html(optionstr);
} else {
alert(result.message);
}
},
});
})
})
</script>
控制器
//查询省份
public function creat(Request $request)
{
$province = DB::table('china_area')->where('parent_id',1)->get();
return view('mouth.creat',['province'=>$province]);
}
//查询市
public function city(Request $request)
{
$province = $request['province'];
$city = DB::table('china_area')->where('parent_id','=',$province)->get()->toArray();
return json_encode(['status' => 0, 'data' => $city]);
}
//查询区
public function area(Request $request)
{
$city = $request['city'];
$area = DB::table('china_area')->where('parent_id','=',$city)->get()->toArray();
return json_encode(['status' => 0, 'data' => $area]);
}
路由
//省份
Route::get('creat','MouthController@creat')->name('admin.creat');
//市
Route::get('city','MouthController@city');
//区
Route::get('area','MouthController@area');