地區三級聯動
阿新 • • 發佈：2018-10-17
wid spa nds namespace view UNC extend res code
控制層：
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Addr extends Controller
{
public function addr(){
$one = Db::name(‘global_region‘) -> where([‘parent_id‘ => 0]) -> select();
return view(‘addr‘,[‘one‘=>$one]);
}
public function two(){
$region_id = input(‘region_id‘);
$two = Db::name(‘global_region‘) -> where([‘parent_id‘ => $region_id]) -> select();
echo json_encode($two);
}
}
視圖層：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<form id="form">
<table>
<tr>
<td width="150">
國家：<select id="one">
<option value="--請選擇--">--請選擇--</option>
{volist name="one" id="vo"}
<option value="{$vo.region_id}">{$vo.region_name}</option>
{/volist}
</select>
</td>
<td width="150">
省份：<select id="two">
<option value="--請選擇--">--請選擇--</option>
</select>
</td>
<td width="200">
區域、鄉、鎮：<select id="three">
<option value="--請選擇--">--請選擇--</option>
</select>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<script src="__STATIC__/jquery-3.3.1.min.js"></script>
<script>
$(‘#one‘).change(function(){
var region_id = $(this).val();
$.ajax({
url:"{:url(‘addr/two‘)}",
data:{region_id:region_id},
method:"post"
}).done(function(msg){
var res = JSON.parse(msg);
console.log(msg);
var str = "";
$.each(res,function (k,v) {
str += "<option value=‘"+v.region_id+"‘>"+v.region_name+"</option>";
});
$(‘#two‘).append(str);
})
});
$(‘#two‘).change(function(){
var region_id = $(this).val();
$.ajax({
url:"{:url(‘addr/two‘)}",
data:{region_id:region_id},
method:"post"
}).done(function(msg){
var res = JSON.parse(msg);
// console.log(msg);
var str = "";
$.each(res,function (k,v) {
str += "<option value=‘"+v.region_id+"‘>"+v.region_name+"</option>";
});
$(‘#three‘).append(str);
})
})
</script>
地區三級聯動