ThinkPhP。 异步实现地区三级联动
来源：互联网 发布：我想开发个软件 编辑：程序博客网 时间：2024/06/02 13:41
控制器区
<?php namespace app\index\controller; use think\Controller; use app\index\model\Region as regionModel; class Index extends Controller { /** * 城市三级联动 * @return array|mixed */ public function index() { if(request()->isPost()) { $regionModel=new regionModel(); $type=input('post.type'); $parent=input('post.parent'); $province=$regionModel->region($type,$parent); $position=$regionModel->position(); return ['province'=>$province,'position'=>$position]; } return $this->fetch(); } /** * 市 * @return array */ public function searchCity() { if(request()->isPost()) { $regionModel=new regionModel(); $id=input('post.id'); $city=$regionModel->searchCity($id); return ['city'=>$city]; } return ['error'=>'异常错误']; } /** * 县 * @return array */ public function searchCounty() { if(request()->isPost()) { $regionModel=new regionModel(); $id=input('post.id'); $county=$regionModel->searchCounty($id); return ['county'=>$county]; } return ['error'=>'异常错误']; } /** * 乡镇 * @return array */ public function searchTown() { if(request()->isPost()) { $regionModel=new regionModel(); $id=input('post.id'); $town=$regionModel->searchTown($id); return ['town'=>$town]; } return ['error'=>'异常错误']; } /** * 村庄 * @return array */ public function searchVillage() { if(request()->isPost()) { $regionModel=new regionModel(); $id=input('post.id'); $village=$regionModel->searchVillage($id); return ['village'=>$village]; } return ['error'=>'异常错误']; }html区
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="/static/admin/js/bootstrap.min.css"> <script type="text/javascript" src="/static/admin/layui/layui.js"></script> <link rel="stylesheet" href="/static/admin/layui/css/layui.css"> <script type="text/javascript" src="/static/vue/vue.js"></script> <title>Title</title> </head> <body> <div id="app" class="form-inline" style="margin-top: 20px;margin-left: 20px;"> <div class="form-group searchMargin"> <label for="type1">省份：</label> <select class="form-control" id="type1" name="region_id" @change="provinceSearch('#type1')"> <option value="">选择省份</option> <option v-for="province in provinceModel" value="{{province.region_id}}">{{province.region_name}}</option> </select> </div> <div class="form-group searchMargin" id="city"> <label for="type2">市区：</label> <select class="form-control" id="type2" name="region_id" @change="citySearch('#type2')" > <option value="">选择市区</option> <option v-for="city in cityModel" value="{{city.region_id}}">{{city.region_name}}</option> </select> </div> <div class="form-group searchMargin" id="country"> <label for="type3">乡/县：</label> <select class="form-control" id="type3" name="region_id" > <option value="">选择乡/县</option> <option v-for="country in countryModel" value="{{country.region_id}}">{{country.region_name}}</option> </select> </div> <div class="form-group searchMargin" id="img"> </div> <div class="form-group searchMargin"> <input type="file" name="file" lay-type="file" class="layui-upload-file"> </div> <!--五级联动start--> <br/> <br/> <div class="form-group searchMargin" id="province"> <label for="type4">省份：</label> <select class="form-control" id="type4" name="province_id" @change="positionSearch('#type4')"> <option value="">选择省份</option> <option v-for="province in positionModel" value="{{province.province_id}}">{{province.province_name}}</option> </select> </div> <div class="form-group searchMargin" id="municipal"> <label for="type5">市：</label> <select class="form-control" id="type5" name="city_id" @change="countySearch('#type5')"> <option value="">选择市</option> <option v-for="municipal in municipalModel" value="{{municipal.city_id}}">{{municipal.city_name}}</option> </select> </div> <div class="form-group searchMargin" id="county"> <label for="type6">县：</label> <select class="form-control" id="type6" name="county_id" @change="townSearch('#type6')"> <option value="">选择县</option> <option v-for="county in countyModel" value="{{county.county_id}}">{{county.county_name}}</option> </select> </div> <div class="form-group searchMargin" id="town"> <label for="type7">镇：</label> <select class="form-control" id="type7" name="town_id" @change="villageSearch('#type7')"> <option value="">选择镇</option> <option v-for="town in townModel" value="{{town.town_id}}">{{town.town_name}}</option> </select> </div> <div class="form-group searchMargin" id="village"> <label for="type8">村：</label> <select class="form-control" id="type8" name="village_id" > <option value="">选择村</option> <option v-for="village in villageModel" value="{{village.village_id}}">{{village.village_name}}</option> </select> </div> <!--五级联动end--> <div class="form-group searchMargin" id="timimg"> <label for="type3">定时发布时间：</label> <div class="layui-inline"> <input class="layui-input" @blur="send()" name="timing" placeholder="自定义日期格式" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"> </div> <button class="layui-btn" type="submit" @click="send()">确定</button> </div> </div> </body> <script type="text/javascript"> layui.use(['layer','jquery','upload','laydate'],function () { let layer=layui.layer,$=layui.jquery; layui.upload({ url:'/index/index/upload', method:'post', success:function (res) { $("#img").append('<img src="/upload/image/'+res.info+'">'); console.log(res); } }); let app=new Vue({ el:'#app', data:{ //三级联动 provinceModel:'', //省 cityModel:'', //市 countryModel:'', //县 //五级联动 positionModel:'', //省份 municipalModel:'', //市 countyModel:'', //县 townModel:'', //镇 villageModel:'', //村 type:1, start:'', end:'', parent:1, times:'', cgi:{ list:'/', searchCity:'/index/index/searchCity' } }, methods:{ showData:function () { layer.msg('加载中...',{icon:16,time:1000}); let self=this; $.ajax({ type:'post', url:self.cgi.list, data:{type:this.type,parent:this.parent}, dataType:'json', success:function (result) { console.log(result); self.positionModel=result.position; self.provinceModel=result.province; } }) }, provinceSearch:function (index) { let parent=$(index).val(); let self=this; $.ajax({ type:'post', url:self.cgi.list, data:{parent:parent,type:2}, dataType:'json', success:function (result) { console.log(result); self.cityModel=result.province; } }) }, citySearch:function (index) { let parent=$(index).val(); let self=this; $.ajax({ type:'post', url:self.cgi.list, data:{parent:parent,type:3}, dataType:'json', success:function (result) { console.log(result); self.countryModel=result.province; } }) }, /* <!--五级联动-->*/ positionSearch:function (index) { let id=$(index).val(); let self=this; $.ajax({ type:'post', url:'/index/index/searchCity', data:{id:id}, dataType:'json', success:function (result) { console.log(result); self.municipalModel=result.city; } }) }, countySearch:function (index) { let id=$(index).val(); let self=this; $.ajax({ type:'post', url:'/index/index/searchCounty', data:{id:id}, dataType:'json', success:function (result) { console.log(result); self.countyModel=result.county; } }) }, townSearch:function (index) { let id=$(index).val(); let self=this; $.ajax({ type:'post', url:'/index/index/searchTown', data:{id:id}, dataType:'json', success:function (result) { console.log(result); self.townModel=result.town; } }) }, villageSearch:function (index) { let id=$(index).val(); let self=this; $.ajax({ type:'post', url:'/index/index/searchVillage', data:{id:id}, dataType:'json', success:function (result) { console.log(result); self.villageModel=result.village; } }) }, send:function(){ let timing=$("input[name=timing]").val(); layer.msg(timing); } }, ready:function () { this.showData(); } }); }); </script> </html>方法区
<?php /** * 城市联动Model * Created by PhpStorm. * User: 尔等已死 * Date: 2017/1/14 * Time: 13:03 * Description：Region */ namespace app\index\model; use think\Model; class Region extends Model { /** * 地区三级联动 * @param $type * @param $parent * @return false|\PDOStatement|string|\think\Collection */ public function region($type,$parent) { return db('region')->where(array('region_type'=>$type,'parent_id'=>$parent))->cache(true)->select(); } /** * 地区五级联动 省份 * @return false|\PDOStatement|string|\think\Collection */ public function position() { return db('position')->field('province_name,province_id')->group('province_id')->cache(true)->select(); } /** * 地区五级联动 市 * @param $id * @return false|\PDOStatement|string|\think\Collection */ public function searchCity($id) { return db('position')->field('city_name,city_id')->group('city_id')->where(array('province_id'=>$id))->cache(true)->select(); } /** * 地区五级联动 县 * @param $id * @return false|\PDOStatement|string|\think\Collection */ public function searchCounty($id) { return db('position')->field('county_name,county_id')->group('county_id')->where(array('city_id'=>$id))->cache(true)->select(); } /** * 地区五级联动 镇 * @param $id * @return false|\PDOStatement|string|\think\Collection */ public function searchTown($id) { return db('position')->field('town_name,town_id')->group('town_id')->where(array('county_id'=>$id))->cache(true)->select(); } /** * 地区五级联动 村 * @param $id * @return false|\PDOStatement|string|\think\Collection */ public function searchVillage($id) { return db('position')->field('village_name,village_id')->group('village_id')->where(array('town_id'=>$id))->cache(true)->select(); } } 0 0
- ThinkPhP。 异步实现地区三级联动
- ThinkPHP利用Ajax实现省市县地区三级联动
- ThinkPHP快速简单实现Ajax地区三级联动(很详细)
- 地区三级联动实现方式
- 三级地区无刷新实现菜单联动
- JS实现省市地区三级联动
- 地区三级联动代码
- 地区三级联动
- yii 三级地区联动
- 三级联动选择地区！
- 地区三级联动
- PHP:Thinkphp实现省市区三级联动
- thinkphp实现省，市，区三级联动
- jquery实现的三级联动地区 jquery插件
- 中国地区三级联动下拉菜单的实现
- 中国地区三级联动下拉菜单的实现
- js--纯js实现省市地区三级联动
- 中国地区三级联动表单
- Java定时更新数据---定时器（spring+struts2）
- 1002. A+B for Polynomials (25)
- ActiveReports报表控件V11 SP1版本正式发布！
- 工作中Django总结之二(模板)
- 噢耶~开始博客之路！
- ThinkPhP。 异步实现地区三级联动
- Volley——网络请求框架的使用
- linux g++使用一
- 指令，过滤器
- MySQL bin-log分析方法
- Session
- Deep Reinforcement Learning for Dialogue Generation 翻译
- Jmeter识别图片验证码插件（后置处理器）
- 10个顶级的CSS和Javascript动画框架推荐
