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

  • 相关阅读:
    站立会议01---个人总结
    团队项目的NABCD
    查找水王
    《构建之法》读书笔记03
    《构建之法》读书笔记02
    《构建之法》读书笔记01
    Java web应用开发技术
    Java 模拟ATM(修正)
    Java 多态
    Java 接口与继承 道至简第六章发表阅读笔记
  • 原文地址:https://www.cnblogs.com/fan-bk/p/9890682.html
Copyright © 2011-2022 走看看