TP5(thinkphp5.0)与layui实现下拉框二级联动

最新推荐文章于 2024-04-23 11:43:46 发布

system_xyz

最新推荐文章于 2024-04-23 11:43:46 发布

阅读量2.2k

点赞数 4

文章标签： thinkphp mysql ajax

本文链接：https://blog.csdn.net/system_xyz/article/details/104926579

版权

最终实现效果

tp5与layui实现下拉框二级联动

例表

水果	蔬菜	肉类
苹果	白菜	牛肉
橘子	萝卜	羊肉
香蕉	西红柿	猪肉

如表格中所示，我们要实现的是，当我们选中水果的时候，二级下拉框弹出苹果、橘子、香蕉这三个选项，蔬菜，肉类也同理

数据库

首先是数据库（以MySQL为例），我们新建一个数据库 tp5，在该数据库中再新建一张表 goods ，表中分 3 个字段：
id：主键自增
name：商品名称
pid：所属父类id（pid=0 的表示是一级分类）
tp5与layui实现下拉框二级联动

ThinkPHP

ThinkPHP中，打开application/database.php，修改数据库的相关配置项，主要是数据库名、用户名、密码这三项，其他按需修改
tp5与layui实现下拉框二级联动

这里以ThinkPHP中默认的index模块为例，打开application/index/view/index/index.html，写一个二级下拉框
tp5与layui实现下拉框二级联动

视图层写完转到控制器，打开application/index/controller/index.php，写控制器代码
tp5与layui实现下拉框二级联动

相关代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <title>Document</title>
</head>

<body>
    <div class="layui-main">
        <form class="layui-form layui-form-pane" action="{:url('index/do_index')}" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">选择分类：</label>
                <div class="layui-input-inline">
                    <select name="goods_parent" id="goods_parent" lay-filter="goods_parent">
                        <option value="0"></option>
                        {volist name="list" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="goods_son" id="goods_son" lay-filter="goods_son">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </form>
    </div>

    <script src="__STATIC__/layui/layui.js"></script>
    <script>
        /*
            加载 jquery 模块
            加载 form 模块
        */
        layui.use(['jquery', 'form'], function () {
            var $ = layui.$,
                form = layui.form;
            //商品分类二级联动
            form.on('select(goods_parent)', function (data) {
                var pid = data.value;//获取父类商品的id
                $.ajax({
                    method: "post",//传输方式
                    url: "{:url('index/do_index')}",//要传输的后台地址
                    data: { pid_key: pid },//键值对
                    //返回数据成功
                    success: function (data) {
                        $('#goods_son option').empty();
                        var goods_son_select = '';
                        for (var o in data) {
                            goods_son_select += '<option value="' + data[o].id + '">' + data[o].name + '</option>';
                        }
                        $('#goods_son').html(goods_son_select);
                        form.render('select');
                    },
                    //返回数据失败
                    error: function () {
                        alert("分类选择错误，请稍后重试！");
                    }
                })
            });
        });
    </script>
</body>

</html>

index.php

<?php

namespace app\index\controller;

use think\Controller;
use think\Request;
use think\Db;

class Index extends Controller
{
    public function index()
    {
        //读取 goods 表，获取商品父类选项，给模版变量赋值
        $list = Db::query('SELECT * FROM goods WHERE pid=0');
        $this->assign('list', $list);

        return $this->fetch();
    }

    public function do_index()
    {
        //如果是Ajax请求就接受处理数据
        if (request()->isAjax()) {

            //获取表单的请求信息
            $request = Request::instance();

            //获取Ajax传递过来的商品父类的id
            $goods_parent_id = $request->param('pid_key');

            //根据商品父类的 id 查询数据库,得到他的子类商品并返回给前台
            $goods_son = Db::table('goods')->where('pid', $goods_parent_id)->select();
            return $goods_son;
        }
    }
}

总结

tp5与layui实现下拉框二级联动

system_xyz

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
TP5(thinkphp5.0)与layui实现下拉框二级联动

最终实现效果例表水果蔬菜肉类苹果白菜牛肉橘子萝卜羊肉香蕉西红柿猪肉如表格中所示，我们要实现的是，当我们选中水果的时候，二级下拉框弹出苹果、橘子、香蕉这三个选项，蔬菜，肉类也同理数据库首先是数据库（以MySQL为例），我们新建一个数据库 tp5，在该数据库中再新建一张表 goods ，表中分 3 个字段：id：主键自增name：商品名...
复制链接

扫一扫