PHP三级联动详细代码（全）

smallmww

于 2023-08-09 23:48:03 发布

阅读量221

点赞数

分类专栏： PHP 文章标签： php

本文链接：https://blog.csdn.net/smallmww/article/details/132199990

版权

PHP 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

有时在项目中常常会用到三级联动，那么怎么php怎么制作三级联动呢？话不多说，直接上代码。

控制器方法

<?php
namespace app\index\controller;
use think\Controller;
use think\Model;
use think\Db;
class Threelevel extends Controller{
    /*获取到数据并跳转至主页面，在主页面输出*/
    public function index(){
        //查询three_level表中class等于0的所有记录并赋值给data
        $data = db('three_level')->where('class','0')->select();  
        //将$data赋值给data模板
        $this->assign('data',$data);
        //返回视图three_level/index
        return view('index');
    }
    // 获取页面传递的等级和选中id
    public function city($class,$id){
        // 查询three_level表中class等于$claaa parent等于$id 的记录并赋值给$data
        $data = db('three_level')->where(['class'=>"$class",'parent'=>"$id"])->select();
        //返回$data
        return $data;
    }
    /**
     * 返回到视图threelevel/add_data
     */
    public function add_data(){
        return view('threelevel/add_data');
    }
    /**
    *获取到ajax传递的参数，用于查表的条件，需要先将参数-1
    *在three_level中查询数据
    *返回数据
     */
    public function garde(){
        $val = request()->POST('cla')-1;
        $data = db('three_level')->where('class',$val)->select();
        return $data;
    }
    /**
    *获取到表单传递的数据赋值data
    *插入到three_level表中
    *根据插入情况返回
    */
    public function insert(){
        if(request()->isPost()){
            $data['text'] = input('text');
            $data['class'] = input('class');
            $data['parent'] = input('pertain');
            $into = db('three_level')->insert($data);
            if($into){
                return $this->success('添加成功','index');
            }else{
                return $this->error('添加失败');
            }
        }
 
    }
}

视图index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
    <style>
        div {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        select {
            margin: 0;
            padding: 0;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <!-- 绑定change事件传递等级参数 -->
        <select name="save" id="save" onchange="save(1)">
            <option value="" selected hidden disabled>-请选择save-</option>
            {volist name='data' id="val"}
            <!-- 循环输出省级数据 -->
            <option value="{$val['id']}">{$val['text']}</option>
            {/volist}
        </select>
        <!-- 绑定change事件传递等级参数 -->
        <select name="city" id="city" onchange="save(2)">
            <option value="" selected hidden disabled>-请选择city-</option>
        </select>
        <select name="classify" id="classify">
            <option value="" selected hidden disabled>-请选择classify-</option>
        </select>
    </div>
    <br>
    <a href="{:url('add_data')}">添加数据</a>
    <br>
    <a href="{:url('ueditor/index')}">ueditor富文本编辑器</a>
</body>
<script src="/static/js/jquery-3.6.0.js"></script>
<script>
    function save(cla) {
        let value;
        if (cla == 1) {
            value = document.getElementById('save').value;
        } else if (cla == 2) {
            value = document.getElementById('city').value;
        }
        $.ajax({
            type: "post",
            url: "city",
            data: {
                class: cla,
                id: value
            },
            success: function (res) {
                console.log(res);
                if (cla == 1) {
                    let str = `<option value="" selected hidden disabled>-请选择city-</option>`;
                    for (let i = 0; i < res.length; i++) {
                        str += `<option value="${res[i].id}">${res[i].text}</option>`;
                    }
                    document.getElementById('city').innerHTML = str;
                    document.getElementById('classify').innerHTML = `<option value="" selected hidden disabled>-请选择classify-</option>`;
                } else if (cla == 2) {
                    let str = `<option value="" selected hidden disabled>-请选择classify-</option>`;
                    for (let i = 0; i < res.length; i++) {
                        str += `<option value="${res[i].id}">${res[i].text}</option>`;
                    }
                    document.getElementById('classify').innerHTML = str;
                }
            }
        })
    }
</script>
</html>

视图add_data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加数据</title>
</head>
<body>
    <form action="{:url('threelevel/insert')}" method="post">
        <label>名称：<input type="text" name="text" required placeholder="请输入地址"></label><br>
        <label>等级：<select name="class" id="class" onchange="cla()" required>
            <option value="" select hidden>-请选择-</option>
            <option value="0">save</option>
            <option value="1">city</option>
            <option value="2">classify</option>
            <select></label><br>
        <label>归属：<select name="pertain" id="pertain" required>
            <option value="">-请选择-</option>
        </select></label><br>
        <input type="submit" name="submit" id="submit" value="提交">
    </form>
</body>
<script src="/static/js/jquery-3.6.0.js"></script>
    <script>
    function cla(){
        let val = document.getElementById('class').value;
        $.ajax({
            type:"post",
            url:"garde",
            data:{
                cla:val
            },
            success:function(res){
                console.log(res);
                let str = `<option value="">-请选择-</option>`;
                for(let i = 0;i < res.length;i++){
                    str += `<option value="${res[i].id}">${res[i].text}</option>`;
                }
                document.getElementById('pertain').innerHTML = str;
            }
        })
    }        
    </script>
</html>

数据表设计