zoukankan      html  css  js  c++  java
  • thinkphp5省市区三级联动例子

    数据库

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

    php

    <?php
    namespace appindexcontroller;
    
    use thinkController;
    use thinkDb;
    use thinkfacadeRequest;
    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

  • 相关阅读:
    Scrapy 概览笔记
    Python 依赖版本控制 (requirements.txt 文件生成和使用)
    Python 虚拟空间的使用
    macOS 所有版本 JDK 安装指南 (with Homebrew)
    鉴权那些事
    Java 位运算符和 int 类型的实现
    ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门
    如何做好一次知识或技术分享
    ASP.NET Core 入门教程 4、ASP.NET Core MVC控制器入门
    ASP.NET Core 入门教程 3、ASP.NET Core MVC路由入门
  • 原文地址:https://www.cnblogs.com/fan-bk/p/9890682.html
Copyright © 2011-2022 走看看