数据库

数据库下载地址：https://files.cnblogs.com/files/fan-bk/packet_region.zip

php

<?php

namespace app\index\controller;

use think\Controller;

use think\Db;

use think\facade\Request;

class Index extends Controller

{

    public function index()

    {

        if (Request::isPost()) {

            $data = Request::param();

            $id = $data['pro_id'];

            $region = Db::name('packet_region')->where(['parent_id' => $id])->select();

            $opt = '<option>--请选择--</option>';

            foreach($region as $key=>$val){

                $opt .= "<option value='{$val['id']}'>{$val['name']}</option>";

            }

            echo json_encode($opt);

            die;

        }

        $region = Db::name('packet_region')->where(['level_type' => 1])->select();

        $this->assign('region', $region);

		return $this->fetch();

	}

    public function hello($name = 'ThinkPHP5')

    {

        return 'hello,' . $name;

    }

}

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- 省份 -->

<select name="pro" id="pro">

	    <option>--请选择--</option>

    {foreach $region as $vo}

        <option value="{$vo.id}">{$vo.name}</option>

    {/foreach}

</select>

<!-- 城市 -->

<select name="city" id="city">

    <option>--请选择省--</option>

</select>

<!-- 区县 -->

<select name="area" id="area">

    <option>--请选择市--</option>

</select>

<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

<script>

    $('#pro').change(function(){

        $.ajax({

            type:"post",

            url:"{:url('index/index')}",

            data:'pro_id='+$('#pro').val(),

            dataType:"json",

            success:function(data){

                console.log(data);

                $('#city').html(data);

				$('#area').html('<option>--请选择市--</option>');

            }

        });

    });

    $('#city').change(function(){

        $.ajax({

            type:"post",

            url:"{:url('index/index')}",

            data:'pro_id='+$('#city').val(),

            dataType:"json",

            success:function(data){

                console.log(data);

                $('#area').html(data);

            }

        });

    });

</script>

</body>

</html>

参考：http://www.thinkphp.cn/topic/41905.html

thinkphp5省市区三级联动例子的更多相关文章

  1. java的JCombobox实现中国省市区三级联动

    源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...

  2. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  3. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  4. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  5. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  6. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  7. 省市区三级联动（二）JS部分简单版

    通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

  8. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  9. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

随机推荐

  1. springBoot、SpringCloud 常用注解

    1,@SpringBootApplication是springboot启动类的入口注解,标注在主启动类上:2,@EnableEurekaServer 是eureka服务端启动,接受其他服务注册进来,标 ...

  2. SVM-sklearn

    目的:1000张数字0-9的手写数字,训练识别手写数字:将其作为32*32的0,1化的数字,随后会将其变为1024列的一个向量 原理:SVM就是把平面的点变为一个空间的点,更好切,核函数就是怎么把他变 ...

  3. angluar1时间控件，在浏览器里是没有问题的，但是真机时间报错NAN

    因为是老项目并且用的angluar1有时也会很头疼没法直接打包和手机联调,所以浏览器上测试的多但是真机和浏览器还是不一样的,废话不说了,看图吧 我的时间插件代码是这样的 后台返回的数据格式是这样的 , ...

  4. python 并发编程 锁 / 信号量 / 事件 / 队列(进程间通信（IPC）) /生产者消费者模式

    (1)锁:进程之间数据不共享,但是共享同一套文件系统,所以访问同一个文件,或同一个打印终端,是没有问题的,而共享带来的是竞争,竞争带来的结果就是错乱,如何控制,就是加锁处理. 虽然使用加锁的形式实现了 ...

  5. iis网站部署常见错误

    sqlserver 授权登录名没有db_owner权限 数据库连接字符串端口没开,连接形式:192.168.0.1,1433

  6. SQl 执行效率总结

    SQL执行效率总结 1.关于SQL查询效率,100w数据,查询只要1秒,与您分享: 机器情况 p4: 2.4 内存: 1 G os: windows 2003 数据库: ms sql server 2 ...

  7. CentOS7 PHP+Redis实现Session共享

    先yum简单的安装redis wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/epel-7.repo ...

  8. checkpoint NGFW 实验（一）

    网络拓扑如下: 配置要求: a.实现LAN和DMZ区域正常访问互联网 b.映射LAN内部主机 10.158.1.1/32的RDP给外网访问,发布DMZ区域的10.133.1.100的主机的web服务到 ...

  9. c#: 创建桌面快捷方式

    App适配输出方式时发现问题,聊做备忘. 需要注意的是:不要直接引用Interop.IWshRuntimeLibrary.dll程序集,因为它可能是x86或x64的,倘若程序以Any CPU方式编译, ...

  10. Loadrunner 11.00录制App脚本篇（Win10）

    参考博文1:https://www.cnblogs.com/mxqh2016/p/6016866.html 参考博文2:https://blog.csdn.net/myohmy2008/article ...