使用 PHP、MySQL 和 jQuery 实现多行动态依赖下拉菜单

程序猿 • 2025年12月12日 07:18:57 • 用户投稿

本文详细介绍了如何使用 PHP、MySQL 和 jQuery/Ajax 技术构建一个支持多行动态添加的表单，其中包含依赖下拉菜单。通过优化数据库查询、完善前端 JavaScript 逻辑以及确保动态生成元素间的正确关联，本教程旨在帮助开发者实现复杂表单的交互功能，并提供清晰的代码示例和最佳实践。

在现代 Web 应用中，用户经常需要输入结构化数据，其中某些字段的值依赖于其他字段的选择。当这种依赖关系需要应用于一个可以动态添加多行的表单时，实现起来会变得更具挑战性。本教程将指导您如何构建一个设备修改日志系统，该系统允许用户在单页上添加多条修改记录，每条记录都包含一个“子系统”下拉菜单和一个动态加载的“组件”下拉菜单，其中“组件”列表会根据所选的“子系统”实时更新。

1. 数据库结构与连接

首先，我们需要定义用于存储子系统和组件信息的数据库表，并建立数据库连接。

数据库表结构:

lu_subsystem (子系统查找表)| 字段 | 类型 | 描述 || :———– | :———- | :———– || id | INT(11) | 主键，自增 || subsystem_name | VARCHAR(255)| 子系统名称 |

lu_component (组件查找表)| 字段 | 类型 | 描述 || :———– | :———- | :———– || component_id | INT(11) | 主键，自增 || subsystem_id | INT(11) | 外键，关联 lu_subsystem.id || component_name | VARCHAR(255)| 组件名称 |

database_connection.php – 数据库连接与辅助函数:

立即学习“PHP免费学习笔记（深入）”；

此文件负责建立与 MySQL 数据库的连接，并提供两个 PHP 函数用于从数据库中获取下拉菜单选项。

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // 设置错误模式为抛出异常/** * 从 lu_subsystem 表中获取所有子系统作为下拉菜单选项。 * * @param PDO $connect 数据库连接对象。 * @return string 包含  标签的 HTML 字符串。 */function fill_subsystem_options($connect){    $query = "SELECT id, subsystem_name FROM lu_subsystem ORDER BY subsystem_name ASC";    $statement = $connect->prepare($query);    $statement->execute();    $result = $statement->fetchAll(PDO::FETCH_ASSOC);    $output = '';    foreach($result as $row)    {        $output .= ''.$row["subsystem_name"].'';    }    return $output;}/** * 根据给定的子系统 ID 从 lu_component 表中获取相应的组件作为下拉菜单选项。 * * @param PDO $connect 数据库连接对象。 * @param int $subsystem_id 子系统 ID。 * @return string 包含  标签的 HTML 字符串。 */function get_component_options_by_subsystem($connect, $subsystem_id){    // 使用预处理语句防止 SQL 注入    $query = "SELECT component_id, component_name FROM lu_component WHERE subsystem_id = :subsystem_id ORDER BY component_name ASC";    $statement = $connect->prepare($query);    $statement->bindParam(':subsystem_id', $subsystem_id, PDO::PARAM_INT);    $statement->execute();    $result = $statement->fetchAll(PDO::FETCH_ASSOC);    $output = '';    foreach($result as $row)    {        $output .= ''.$row["component_name"].'';    }    return $output;}?>

注意事项:

我们使用 PDO (PHP Data Objects) 进行数据库操作，这是一种更安全、更灵活的方式。fill_subsystem_options 函数用于获取所有子系统，用于初始加载。get_component_options_by_subsystem 函数是关键，它接收一个 subsystem_id 参数，并返回该子系统下的所有组件。请注意，这里修正了原始代码中查询条件错误的问题，确保通过 subsystem_id 进行过滤。

2. AJAX 后端接口 (fetch_components.php)

这个 PHP 文件将作为前端 AJAX 请求的端点，负责接收子系统 ID，并返回对应的组件列表。

<?php// fetch_components.php (原 fill_component.php)include('database_connection.php');if (isset($_POST["subsystem_id"]) && !empty($_POST["subsystem_id"])) {    // 调用辅助函数获取组件选项    echo get_component_options_by_subsystem($connect, $_POST["subsystem_id"]);} else {    // 如果没有提供 subsystem_id，返回一个默认选项    echo 'Select Subsystem First';}?>

3. 前端页面结构与逻辑 (index.php)

这是实现多行动态依赖下拉菜单的核心文件。它包含 HTML 结构、引入必要的 JavaScript 库（jQuery 和 Bootstrap），以及处理动态行添加/删除和下拉菜单依赖逻辑的 jQuery 代码。

      动态依赖下拉菜单实现多行输入                        body { padding-top: 20px; }        .container { max-width: 960px; }                  使用 Ajax jQuery 和 PHP 实现动态添加/删除依赖下拉菜单行
      
      输入设备修改详情
      
                                                                            输入项目名称                 子系统                 组件                               
            
                                        
          
                                
        
          
        $(document).ready(function(){      var count = 0; // 用于跟踪动态生成行的唯一标识符      // 动态添加行      $(document).on('click', '.add', function(){        count++; // 每次添加行，计数器递增，确保每个新行有唯一的 ID        var html = '';        html += '';        html += '';        // subsystem_id 下拉菜单，使用 data-row-id 属性来关联当前行的组件下拉菜单        html += '选择子系统';        // item_component_id 下拉菜单，其 ID 包含 count，以便在 JS 中精确选择        html += '选择组件';        html += '';        $('tbody').append(html); // 将新行添加到表格的 tbody 中      });      // 动态删除行      $(document).on('click', '.remove', function(){        $(this).closest('tr').remove(); // 找到最近的父级  并移除      });      // 处理子系统下拉菜单的改变事件，实现组件的动态加载      $(document).on('change', '.subsystem_id', function(){        var selectedSubsystemId = $(this).val(); // 获取当前选中的子系统 ID        var currentRowId = $(this).data('row-id'); // 获取当前行的唯一 ID        var targetComponentDropdown = $('#item_component_id_' + currentRowId); // 根据行 ID 找到对应的组件下拉菜单        if (selectedSubsystemId) { // 只有当选择了有效的子系统时才发送 AJAX 请求          $.ajax({            url: "fetch_components.php", // AJAX 请求的后端接口            method: "POST",            data: { subsystem_id: selectedSubsystemId }, // 发送子系统 ID            success: function(data)            {              var html = '选择组件'; // 默认选项              html += data; // 追加从后端返回的组件选项              targetComponentDropdown.html(html); // 更新组件下拉菜单的内容            },            error: function() {                targetComponentDropdown.html('加载组件失败'); // 错误处理            }          });        } else {            // 如果未选择子系统，清空组件下拉菜单并显示默认提示            targetComponentDropdown.html('选择组件');        }      });      // 表单提交处理      $('#insert_form').on('submit', function(event){        event.preventDefault(); // 阻止表单默认提交行为        var error = '';        // 简单的前端验证        $('.item_name').each(function(index){ // index 从 0 开始          if($(this).val() == '')          {            error += '请在第 ' + (index + 1) + ' 行输入项目名称
';            return false;          }        });        $('.subsystem_id').each(function(index){          if($(this).val() == '')          {            error += '请在第 ' + (index + 1) + ' 行选择子系统
';            return false;          }        });        $('.item_component_id').each(function(index){          if($(this).val() == '')          {            error += '请在第 ' + (index + 1) + ' 行选择组件
 ';            return false;          }        });        var form_data = $(this).serialize(); // 序列化表

以上就是使用 PHP、MySQL 和 jQuery 实现多行动态依赖下拉菜单的详细内容，更多请关注php中文网其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1320992.html

aj bootstrap css html java javascript jquery js mysql php 前端

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

使用 Raspberry Pi 搭建个人网站：无需传统托管服务

上一篇 2025年12月12日 07:18:49

解决PHP Twilio SDK凭证错误：getenv()与环境变量配置指南

下一篇 2025年12月12日 07:19:05

Linux查看系统日志的常用命令

答案是查看Linux日志需综合使用journalctl、dmesg、tail、grep等工具。journalctl用于systemd系统集中查询服务及内核日志，支持时间、优先级、字段等多维度过滤；dmesg专注内核启动与硬件问题；tail -f实时监控日志动态；cat、grep、less结合正则和管…

程序猿
用户投稿 2026年9月21日
0000
用户投稿

Java中设计可扩展类的技巧与经验

设计可扩展类应优先组合而非继承，通过接口解耦；明确开放protected扩展点并封闭关键逻辑；提供详细文档说明扩展规则；谨慎处理状态与初始化，避免构造器中调用可重写方法；多数场景推荐接口与组合，必要时才允许继承。在Java中设计可扩展类时，核心目标是让类既能满足当前需求，又便于未来被安全、可控地继…

程序猿
2026年9月21日
1000
用户投稿

mysql如何实现后台管理系统

答案：基于MySQL的%ignore_a_1%需设计用户、权限、日志等表结构，通过后端语言实现安全的CRUD接口与JWT认证，前端展示数据并控制权限，确保系统安全稳定。实现一个基于 MySQL 的后台管理系统，核心是构建一个安全、稳定、可扩展的系统架构，将数据库作为数据存储层，配合后端语言和前端界…

程序猿
2026年9月21日
0000
用户投稿

如何为VSCode设置自定义的代码高亮颜色？

答案：通过settings.json中的editor.tokenColorCustomizations可自定义VSCode代码高亮颜色，支持全局或特定主题下修改关键字、字符串等元素颜色，结合textMateRules和作用域精确控制，提升代码可读性。为 VSCode 设置自定义的代码高亮颜色，可以…

程序猿
2026年9月21日
0000
用户投稿

115网盘资源查找入口_115网盘资源快速链接通道

115网盘资源查找入口为http://www.115.com/，支持多平台访问、高效媒体管理及安全存储，提供网页端与客户端多种使用方式。 115网盘资源查找入口在哪里？这是不少网友都关注的，接下来由PHP小编为大家带来115网盘资源快速链接通道，感兴趣的网友一起随小编来瞧瞧吧！ http://www…

程序猿
2026年9月21日
0000
用户投稿

mysql常用存储引擎有哪些

InnoDB是现代MySQL应用的首选存储引擎，因其支持事务（ACID）、行级锁、外键约束、崩溃恢复和MVCC，适用于高并发、数据完整性要求高的OLTP场景；MyISAM虽读取快但仅支持表级锁且无事务和外键，适用于读多写少的简单场景，已逐渐被淘汰；Memory引擎将数据存于内存，速度快但易失，适合临…

程序猿
2026年9月21日
0000
用户投稿

在Java中多态是如何通过虚方法实现的

多态通过动态方法调度实现，JVM利用虚方法表（vtable）在运行时根据对象实际类型确定方法调用。Java中除private、static、final方法和构造器外均为虚方法，子类重写方法后其vtable指向新实现，调用时JVM通过对象类型查找vtable定位具体方法。如Animal a = new…

程序猿
2026年9月21日
0000
用户投稿

如何配置VSCode来完美支持Vue.js开发？

安装Volar、TypeScript Vue Plugin、ESLint和Prettier扩展，禁用Vetur，在settings.json中配置vetur.enabled为false，设置ESLint保存时自动修复并指定Prettier为默认格式化工具，关联.vue文件语言，启用TypeScrip…

程序猿
2026年9月21日
0000
MySQL数据库日志审计与合规性实现_保护敏感数据与满足法规需求

mysql日志审计是合规性的基石，因为它提供了数据库操作的完整证据链，记录用户身份、操作类型和时间戳等关键信息，满足gdpr、hipaa等法规要求，并支持事后追溯与事前震慑。1. mysql自身提供错误日志、通用查询日志、慢查询日志和二进制日志，其中通用查询日志记录所有sql语句，二进制日志用于数据…

程序猿
2026年9月21日 • 用户投稿
1000
用户投稿

WordPress插件定制：使用Filter Hook修改邮件通知接收者

本教程将指导您如何在WordPress中利用Filter Hook定制插件行为，特别是修改第三方插件的邮件通知接收者。我们将详细讲解如何识别目标Filter、理解其参数，并正确编写回调函数来拦截或修改数据，以实现自定义的邮件发送逻辑，避免因参数不匹配导致的错误。 WordPress Hook机制概览…

程序猿
2026年9月21日
1000
用户投稿

谷歌浏览器官方在线访问最新版Chrome官网登录

谷歌浏览器官方在线访问入口是https://www.google.cn/chrome/，提供简洁界面、跨设备同步、高效内核、安全防护和丰富扩展生态。谷歌浏览器官方在线访问入口在哪里？这是不少网友都关注的，接下来由PHP小编为大家带来最新版Chrome官网登录地址，想要获取纯净浏览体验的网友一起随小…

程序猿
2026年9月21日
2000
用户投稿

Java Collections.singletonList如何创建单元素集合

Collections.singletonList(T item) 返回只含一个元素的不可变列表，传入指定对象后生成轻量级只读集合，适用于需高效传递单元素场景。该列表禁止修改操作，否则抛出异常，允许 null 元素，内部优化减少内存开销，常用于 API 参数传递或流处理中的临时数据构造。 Java …

程序猿
2026年9月21日
1000
用户投稿

JavaScript中的模块联邦如何实现微前端的代码共享？

模块联邦通过运行时动态加载实现微前端代码共享，无需打包公共依赖。使用 ModuleFederationPlugin 配置 name、remotes、exposes 和 shared，使应用可暴露或引入远程模块，支持组件、工具函数及状态管理共享，提升复用性并减少冗余。模块联邦通过在构建时让不同应用直…

程序猿
2026年9月21日
2000
用户投稿

Swoole如何实现一个UDP服务器

答案：使用Swoole可轻松创建高性能UDP服务器。通过new SwooleServer()设置UDP套接字，监听Packet事件接收数据，利用sendto()回复客户端；结合set()配置worker_num等参数优化性能，配合PHP UDP客户端测试通信，适用于高并发、低延迟场景。使用Swoo…

程序猿
2026年9月21日
1000
MySQL执行计划中的Extra字段代表什么_怎么看优化空间？

在 mysql 查询优化中，执行计划的 extra 字段用于说明查询执行时的额外操作，常见的值包括：1. using filesort 表示需要额外排序，应尽量通过建立索引避免；2. using temporary 表示使用了临时表，常见于 group by 或复杂 join，需优化减少其使用；3.…

程序猿
2026年9月21日 • 用户投稿
1000
用户投稿

PHP简易路由框架构建：从URL解析到动态控制器加载的实践指南

本文旨在指导读者构建一个基础的PHP路由系统，实现URL路径到控制器方法的高效映射。内容涵盖URL解析、控制器动态加载、方法调用以及关键的错误处理机制，特别强调如何避免常见的“未定义变量”错误和文件包含路径问题，确保路由系统稳定且易于维护。一、路由系统核心原理构建一个简单的php路由系统，其核心…

程序猿
2026年9月21日
2000
用户投稿

如何在Java中理解Java I/O与NIO机制

传统I/O是阻塞式流模型，适用于低并发场景；NIO基于缓冲区与通道，支持非阻塞和多路复用，适合高并发网络应用，核心区别在于线程模型与资源利用率。 Java中的I/O（输入/输出）与NIO（New I/O）是处理数据读写的核心机制，理解它们的区别和使用场景对开发高性能应用至关重要。传统I/O基于流模型…

程序猿
2026年9月21日
1000
用户投稿

UC浏览器网页上的文字无法选中复制怎么办 UC浏览器解决网页文字禁止复制问题

答案：可通过开发者工具、阅读模式、打印预览、OCR识别或自定义脚本解除UC浏览器网页复制限制。具体操作依次为：开启开发者工具并执行JavaScript代码解除限制；启用阅读模式净化页面内容；使用打印预览重新渲染页面以选中文字；对截图应用OCR技术提取文本；添加书签脚本自动移除禁用选择的代码，从而实现…

程序猿
2026年9月21日
1000
用户投稿

JavaScript中的尾调用优化（TCO）在ES6中如何工作？

尾调用是指函数的最后一个动作调用另一个函数，ES6引入尾调用优化以重用栈帧、避免内存溢出，支持真正的尾递归，如阶乘函数通过累积参数实现。尾调用优化（Tail Call Optimization, TCO）是ES6引入的一项语言特性，目的是在特定条件下重用函数调用栈帧，避免不必要的内存增长，从而支持…

程序猿
2026年9月21日
2000
MySQL数据分库分表如何设计_避免性能瓶颈的方法？

分库分表设计需注意分片键选择、分片数量控制、避免跨库查询及完善运维体系。一，优先选择高频查询字段作为分片键，如用户id，避免使用时间戳以防写热点；二，初期合理分片（如4~8库，每库4~8表），预留扩容空间并根据数据总量反推分片数；三，尽量避免跨库查询，可通过冗余数据、异步汇总或强制路由优化；四，配套…

程序猿
2026年9月21日 • 用户投稿
1000