码迷,mamicode.com
首页 > 其他好文 > 详细

地区三级联动

时间:2018-10-17 20:46:30      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:联动   use   html   xtend   stat   script   append   json   set   

控制层:

<?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>

地区三级联动

标签:联动   use   html   xtend   stat   script   append   json   set   

原文地址:https://www.cnblogs.com/wanglongfei/p/9806773.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!