地区的联动

PHP页面:

//二级联动

public function diqu_show()
{
$data=Db::table("area")->where("parent_id=0")->select();
//var_dump($data);die;
$aa=$data[0]['id']+100;
$shi_data=Db::table("area")->where("parent_id='$aa'")->select();
// var_dump($shi_data);die;
$arr=['data'=>$data,'shi_data'=>$shi_data];
return view("diqu_show",['arr'=>$arr]);
}
//市级
public function shi_show()
{
$parent_id=Request::instance()->param("parent_id");
$shi_data=Db::table("area")->where("parent_id='$parent_id'")->select();
return view("diqu_show2",['shi_data'=>$shi_data]);
}
//省级
public function shiji_show()
{
$shi=Request::instance()->param("shi");
$shi=Db::table("area")->where("parent_id='$shi'")->select();
return view("diqu_show3",['shi'=>$shi]);
}
HTML页面:
diqu_show.html页面:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<center>
<table>
<tr>
<td>
省区:
<select name="" id="" class="sheng">
<option value="">请选择</option>
{volist name="arr.data" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}
</select>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;市级:
<select name="" id="" class="shi">
<option value="">请选择</option>
</select>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;县/区:
<select name="" id="" class="xian">
<option value="">请选择</option>
</select>
</td>
</tr>
</table>
</center>
<script src="__STATIC__/js/jquery.min.js"></script>
<script>
$(function () {
$(document).on("change",".sheng",function () {
// var sheng=$("select option:selected").val();
var sheng=$(this).val();
//请求
$.get(
"{:url('index/shi_show')}?parent_id="+sheng,
function (data) {
$(".shi").html(data)
}
)
})

$(document).on("change",".shi",function () {
// var sheng=$("select option:selected").val();
var shi=$(this).val();
//请求
$.get(
"{:url('index/shiji_show')}?shi="+shi,
function (data) {
$(".xian").html(data)
}
)
})

})
</script>
</body>
</html>
diqu_show2.html页面
<option value="">请选择</option>
{volist name="shi_data" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}
diqu_show3.html页面
<option value="">请选择</option>
{volist name="shi" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}
 
你所浪费的今天是那些死去的人所奢望的明天,你所厌恶的现在是未来的你所回不去的曾经。
原文地址:https://www.cnblogs.com/stj123/p/9787462.html