在现代 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 包含 ';
}
return $output;
}
/**
* 根据给定的子系统 ID 从 lu_component 表中获取相应的组件作为下拉菜单选项。
*
* @param PDO $connect 数据库连接对象。
* @param int $subsystem_id 子系统 ID。
* @return string 包含 ';
}
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，并返回对应的组件列表。
Select Subsystem First'; } ?>
3. 前端页面结构与逻辑 (index.php)
这是实现多行动态依赖下拉菜单的核心文件。它包含 HTML 结构、引入必要的 JavaScript 库（jQuery 和 Bootstrap），以及处理动态行添加/删除和下拉菜单依赖逻辑的 jQuery 代码。
动态依赖下拉菜单实现多行输入
使用 Ajax jQuery 和 PHP 实现动态添加/删除依赖下拉菜单行
输入设备修改详情
