城市三级联动 和 五级联动

已于 2023-05-08 16:59:59 修改
阅读量2.3k 收藏 1
点赞数
分类专栏： ThinkPHP Vue 文章标签： ThinkPHP Vue Mysql 联动
于 2019-02-20 11:19:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fl140125/article/details/87783431
版权

数据库

地址链接: https://pan.baidu.com/s/1FDE8KuBEpJF7i4McR3aECA

提取码: nq39

//控制器代码

<?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'=>'异常错误'];
    }
<?php

/**
 * 城市联动Model
 * Created by PhpStorm.
 */
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();
    }


}

注意下载的Vue版本 

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

fl140125
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ThinkPhP。 异步实现地区三级联动
霖霖侠
04-01 830
控制器区 <?php namespace app\index\controller; use think\Controller; use app\index\model\Region as regionModel; class Index extends Controller { /** * 城市三级联动
jQuery应用-房地产项目实战视频课程
07-06
结合房地产CRM销售系统讲解jquery制作复杂界面的应用，主要制作售楼指引界面，动态生成调研试卷功能,省市县联动功能，动态部门及员工选择功能；该课程是在我的easyui从入门到精通课程上的后续课程
通过layui实现省市区下拉列表
最新发布
清音的博客
05-15 283
首先，你需要将 area.json 文件引入到你的 HTML 页面中。确保 area.json 文件在相同的目录下，并且可以通过相对路径进行访问。
2021年省市区街道居委五级联动
qq_15592789的博客
07-05 937
国际统计局2021年省市区街道联动数据抓取
最新中国地区各种JSON、CSV数据大全
小北的博客
07-13 7975
中华人民共和国的行政区划
pandas 选择数据 字符串_pandas入门: 数据选择
weixin_39705435的博客
11-21 277
关于pandas数据选择的知识点总结。首先，创建一个dataframedf 创建的dataframe信息如下： A B C 0 3 1.2 aa 1 4 2.4 bb 2 8 4.5 cc 3 9 7.3 dd选择一列df1 = df['A'] # 根据列名选取一列，以Series的形式返回列 df1 = df.A # 与上面写法效果相同结果如下：0 3...
城市三级联动插件.rar
10-14
城市三级联动的基本原理是通过JavaScript或者jQuery等前端库来实现动态加载和联动效果。当用户选择一个省份时，插件会根据预设的数据加载对应的市列表；同样，当市被选定后，会进一步加载相应的区或县列表。这种实时...
强大的jQuery省市区城市三级联动插件
06-10
**jQuery省市区城市三级...总的来说，这款jQuery省市区城市三级联动插件凭借其强大的功能和易用性，为Web开发者提供了一种高效解决地区选择问题的方案。只需简单的配置和调用，就能快速集成到项目中，提升用户体验。
简单的vue三级联动下拉框代码
06-11
本示例中提到的"简单的vue三级联动下拉框代码"是Vue.js应用场景的一个常见实例，常用于构建复杂的表单组件，如地区选择、商品分类筛选等。 一、Vue.js 三级联动下拉框基础概念 1. Vue.js：Vue.js 是一套用于构建...
前端jquery+后端servlet实现三级联动项目省市区
04-25
这个项目“前端jquery+后端servlet实现三级联动项目省市区”就是一个典型的案例，它展示了如何利用jQuery在前端处理用户交互，以及如何通过Servlet在后端进行数据处理和传输。下面我们将详细探讨这个项目中的关键...
jQuery商品发布三级联动菜单代码
06-24
这个过程可以递归，如果需要四级、五级联动菜单。 5. **选择特效**：描述中提到的支持选择展示特效，可以通过jQuery的动画效果来实现，比如淡入淡出(`fadeIn/fadeOut`)、滑动(`slideUp/slideDown`)等。在用户切换...
layui-省市县三级联动下拉框-HTML源码
10-02
中国的省市县三级联动下拉框html+js源码，看懂后也可以扩展成四级五级联动
layui地址联动sql
10-14
实现全国城市联动选择 layui+Thinkphp,layui的地址选择,地址sql语句
全国行政地区五级联动数据库
02-28
2018最新全国省市区县乡镇五级联动MySQL数据库，解压后接近77M，包含72万行数据，地区精确到村，单表，方便做五级联动。亲测可用，为sql文件，可直接导入使用
2019年省市县五级联动数据
09-20
2019年中国省市县地区代码 省份数据：31，城市数量：342，区县数量：3272，乡镇数量：43104，社区数量：658001，共计：704750。 下表仅列出省市县数据，所有数据请自行下载查看。 下载数据包含：代码、名称、上级代码、简码、乡村分类、下级数量
中国省市五级联动
01-24
数据库文件
省/市/区/镇/村-五级联动
qq_40083897的博客
11-15 380
具体设计结构如下： 1，Controller层 @ApiOperation(value = "添加区域信息", notes = "添加区域信息-（添加维护使用）") @PostMapping public ResultBody<TblBaseRegionDat> addRegion(@RequestBody TblBaseRegionDat regionDat){ String appId = UserContextHolder.getAppId.
1分钟实现layui 省市区三级联动选择（不需要自己拥有区域库）
lw545034502的博客
04-10 3147
1、下载layui的省市区联动JS 下载地址（本人自己上传的资源，安全哦！）：https://download.csdn.net/download/lw545034502/16602679 2、编写html部分 整个选择器需要使用一个父标签包裹，如下使用了id="area-picker"，并且分别给省、市、区的select加上province-selector、city-selector、county-selector，用来区分对应的内容标签，这里也可以自定义lay-f...
Layui联动选择框实现七大地理区/省/市三级联动
xxxPHP_er的博客
03-11 1165
最近在开发的项目时，要求实现中国七大区与省市的联动选择，在网上找了一圈的插件，全都是省市区的三级联动，于是就通过layui简单的写了一个。
vue2 省市五级联动
07-14
对于 Vue2 省市五级联动的实现，可以使用 Vue2 的组件化和数据绑定特性来实现。以下是一个简单的实现示例： 1. 首先，在 Vue 实例的 data 中定义省、市、区三个变量，用于保存用户选择的值： ```javascript data()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值