本文详细介绍了如何使用 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; }$(document).ready(function(){ var count = 0; // 用于跟踪动态生成行的唯一标识符 // 动态添加行 $(document).on('click', '.add', function(){ count++; // 每次添加行，计数器递增，确保每个新行有唯一的 ID var html = ''; html += '使用 Ajax jQuery 和 PHP 实现动态添加/删除依赖下拉菜单行
输入设备修改详情
输入项目名称 子系统 组件 '; 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赞 (0)打赏微信扫一扫
支付宝扫一扫
关于作者
使用 Raspberry Pi 搭建个人网站：无需传统托管服务上一篇 2025年12月12日 07:18:49解决PHP Twilio SDK凭证错误：getenv()与环境变量配置指南下一篇 2025年12月12日 07:19:05相关推荐
解决PHP Twilio SDK凭证错误：getenv()与环境变量配置指南
本文旨在解决PHP Twilio SDK中常见的“Credentials are required”错误，该错误通常源于getenv()函数无法正确获取Twilio账户SID和Auth Token。我们将深入探讨getenv()在Web环境下的工作机制，并提供两种有效的解决方案：直接在代码中赋值（适…
使用 Raspberry Pi 搭建个人网站：无需传统托管服务
本文旨在指导读者如何在不依赖传统托管服务（如 Wix）的情况下，利用 Raspberry Pi 搭建个人网站并配置域名。我们将介绍域名注册、DNS 解析以及如何将域名指向你的 Raspberry Pi 服务器，最终实现通过自定义域名访问你的网站。 搭建个人网站，特别是想拥有一个自定义域名，通常需要经…
Laravel Livewire中密码更新后会话保持策略与实践
本文探讨了在Laravel Livewire应用中，用户成功修改密码后会话可能失效并导致重定向至登录页的问题。核心解决方案在于密码更新后，立即通过Auth::attempt使用新密码重新认证用户，并调用session()->regenerate()来刷新会话ID，从而确保用户会话的连续性，避免…
在 Laravel 配置中优雅地处理动态变量：使用占位符与字符串替换
本文探讨了在 Laravel 配置文件中处理动态内容的需求，例如在预定义消息字符串中插入运行时变量。针对直接访问变量的限制，教程提供了一种有效策略：在配置中使用占位符（如 {variable}），并在获取配置值后，利用 str_replace() 等函数进行动态替换，从而实现灵活且可维护的字符串管理…
PHP 数组操作：简化时间段显示为单一范围
本文介绍如何在PHP中高效处理包含多个时间段的数组，实现将复杂的时间范围（如9:00-9:45, 9:55-10:20, 10:30-11:00）简化为单一的起始与结束时间（如9:00-11:00）的显示需求。通过直接访问数组的首尾元素，避免不必要的迭代和格式化，从而优化代码性能和可读性。 需求分析…
PHP/Laravel中安全解析并执行字符串数学表达式
本教程探讨如何在PHP/Laravel环境中安全地执行存储在文本字符串中的数学计算，特别是针对简单的乘法表达式。文章详细介绍了如何通过explode和array_reduce函数来解析并计算字符串，避免使用不安全的eval()函数，并强调了这种方法的优点和局限性，为处理更复杂的表达式提供了思路。 理…
PHP数据库备份自动化_PHPcron任务数据库备份配置
实现PHP数据库自动化备份，需编写包含数据库导出、压缩、清理逻辑的PHP脚本，并通过Linux cron定时执行。脚本使用exec()调用mysqldump导出数据，gzip压缩文件，并按保留策略删除旧备份；配置cron任务如“0 2 * /usr/bin/php /path/to/backup_d…
PHP中高效提取连续时间范围的起始与结束时间
本教程旨在解决PHP中从一系列不连续时间段数据中，提取并展示一个整体连续时间范围的问题。通过直接访问数组的首个起始时间和末个结束时间，可以避免不必要的迭代与格式化操作，从而以简洁高效的方式输出如“9:00 – 11:00”的统一时间范围表示。 引言：处理时间范围数据的常见挑战 在web开…
优化 Laravel 查询：实现复杂的 AND/OR 混合条件逻辑
本文深入探讨 Laravel 查询构建器中处理 AND 和 OR 混合条件逻辑的技巧。针对用户在查询时遇到的多条件筛选只执行 AND 逻辑，导致 OR 条件失效的问题，文章详细解释了如何利用闭包（Closure）构建嵌套的 where 子句，从而准确生成包含 AND 和 OR 组合的 SQL 语句，…
解决Laravel Livewire密码更新后会话失效问题
本文旨在解决Laravel Livewire应用中用户密码更新后会话意外失效的问题。通过深入分析原因，我们提供了一种有效的解决方案：在成功更改密码后，立即重新认证用户并刷新会话。这不仅能确保用户体验的流畅性，避免不必要的重新登录，还能增强应用程序的安全性。 1. 问题背景与分析 在Laravel L…
PHP AES-256-CBC 解密函数移植到 Node.js 的实践与安全考量
本文详细探讨了将 PHP 的 AES-256-CBC 解密功能移植到 Node.js 过程中可能遇到的问题及正确的实现方法。重点介绍了 crypto 模块的正确使用、hex2bin 函数的替代、Base64 密文处理以及 update 和 final 方法的拼接技巧。同时，强调了密钥和初始化向量 (…
Node.js中实现PHP AES-256-CBC解密：从常见错误到安全实践
本文旨在指导开发者将PHP中的AES-256-CBC解密功能正确迁移至Node.js环境。我们将详细解析在迁移过程中常见的技术陷阱，如hex2bin函数的不当使用、Base64编码处理错误、Buffer操作细节以及解密结果的正确拼接。此外，文章还将重点强调密钥和初始化向量（IV）的安全实践，包括推荐…
深入解析 Carbon 日期比较陷阱与优化实践
本文旨在探讨在使用 PHP Carbon 库进行日期比较时，循环中布尔状态管理不当可能导致的逻辑错误。我们将详细分析一个常见的陷阱，即在循环内部未能正确重置状态变量，从而引发预期外的数据展示。文章将提供两种解决方案：首先是重置循环内状态变量的直接修正，其次是推荐的更简洁、更具可读性的代码重构方法，以…
PHP字符串格式化技巧：动态插入字符并保留前导零
本教程探讨如何在PHP中将形如’022100’的字符串格式化为’0221.00’。核心方法是利用字符串操作函数substr_replace，通过动态计算插入位置（从右侧数两位）来精确插入小数点，同时确保前导零得以保留，避免了数值转换可能带来的数据丢失问…
php怎么获得内容_php获取网页或文件内容的函数使用
PHP获取内容主要用file_get_contents()和cURL，前者适用于简单读取本地或远程内容，语法简洁；后者更灵活，支持超时、HTTP头、POST等高级设置。常见陷阱包括超时未设置、缺少User-Agent导致被拦截、忽略SSL验证风险及编码问题。最佳实践是合理设置超时、模拟浏览器UA、生…
优化PHP处理大量数据迭代的内存效率：利用生成器高效遍历20k+数值
本文探讨了在PHP中处理大型数据集（如20k+数值）迭代时的内存优化策略。通过引入PHP生成器，我们能够避免一次性加载所有数据到内存，从而显著降低资源消耗，提高程序运行效率，特别适用于批量处理任务，如对大量Drupal节点进行更新操作。 问题分析：大型数组的内存挑战 在php开发中，当需要对大量数据…
Symfony 动态路由与固定路由的条件匹配技巧
本文探讨在 Symfony 应用中处理动态页面路由与固定功能路由（如登录、注册）之间冲突的策略。我们将介绍通过调整路由顺序、利用正则表达式进行条件匹配、优化路由结构以及使用 Symfony 5.1+ 路由优先级参数等方法，确保动态页面路由仅在特定条件下生效，从而避免意外的路由匹配问题。 在 symf…
解决 Laravel Livewire 密码更新后会话失效的问题
本文探讨了 Laravel Livewire 应用中用户密码更新后会话失效的问题。当用户修改密码成功后，系统可能因安全机制导致会话过期。教程将详细介绍如何通过在密码更新后立即重新认证用户并重新生成会话，从而有效保持用户登录状态，确保流畅的用户体验。 1. 问题背景与原因分析 在 Laravel 8 …
Laravel 配置中动态字符串的占位符与替换实践
本教程探讨了在 Laravel 配置文件中管理动态字符串的方法。针对在配置常量中嵌入变量的需求，文章提出使用占位符（如 {key}）结合字符串替换函数（如 str_replace）的解决方案，从而实现灵活、可维护的动态内容生成，避免了硬编码和繁琐的字符串拼接。 在 laravel 应用开发中，我们经…
PHP GET参数安全传输：Base64编码实践与考量
本文旨在探讨PHP GET方法传输数据时面临的安全隐患，并提供一种通过Base64编码对URL参数进行伪装和保护的实践方案。通过学习如何使用base64_encode和base64_decode函数，开发者可以降低数据在URL中传输时的可读性，从而增强应用的数据安全性，但需注意其局限性。 PHP G…
微信扫一扫 
支付宝扫一扫 
