如何在PHP中实现院系-专业联动下拉并添加新专业？

嘿，这个需求是后台管理里很常见的联动场景，我给你整理了一套完整的PHP实现方案，分步骤来，你跟着做就行：

一、先确认数据库结构（对照你的表调整） #

首先咱们得确保两张表的关联逻辑是对的，我贴出标准建表SQL，你可以对比自己的数据库：

-- 院系表（faculty）
CREATE TABLE faculty (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL UNIQUE COMMENT '院系名称'
);

-- 专业表（department），外键绑定院系id
CREATE TABLE department (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL UNIQUE COMMENT '专业名称',
    faculty_id INT NOT NULL COMMENT '所属院系id',
    FOREIGN KEY (faculty_id) REFERENCES faculty(id) ON DELETE CASCADE
);

二、核心实现思路 #

1. 页面加载时，先渲染第一个下拉框（院系列表）
2. 监听院系下拉框的选择事件，通过AJAX请求后端接口，获取对应院系的专业列表，动态渲染第二个下拉框
3. 新增专业时，通过表单提交选中的院系ID和新专业名称，后端插入数据库后刷新专业列表

三、完整代码实现 #

我把所有逻辑整合在一个index.php文件里，方便你测试，你可以根据实际项目拆分：

<?php
// 数据库连接配置（替换成你的数据库信息）
$host = 'localhost';
$dbname = 'your_database';
$username = 'your_username';
$password = 'your_password';

// 数据库连接函数
function db_connect() {
    global $host, $dbname, $username, $password;
    try {
        $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $pdo;
    } catch(PDOException $e) {
        die("数据库连接失败: " . $e->getMessage());
    }
}

// 处理新增专业的请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_department'])) {
    $pdo = db_connect();
    $faculty_id = $_POST['faculty_id'];
    $department_name = trim($_POST['department_name']);
    
    if (empty($department_name)) {
        $error_msg = "专业名称不能为空！";
    } else {
        try {
            $stmt = $pdo->prepare("INSERT INTO department (name, faculty_id) VALUES (:name, :faculty_id)");
            $stmt->bindParam(':name', $department_name);
            $stmt->bindParam(':faculty_id', $faculty_id);
            $stmt->execute();
            $success_msg = "专业新增成功！";
        } catch(PDOException $e) {
            $error_msg = "新增失败：" . $e->getMessage();
        }
    }
}

// 获取所有院系列表
$pdo = db_connect();
$faculties = $pdo->query("SELECT id, name FROM faculty ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>院系-专业管理</title>
    <style>
        .container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        select, input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .success { color: green; }
        .error { color: red; }
    </style>
</head>
<body>
    <div class="container">
        <h2>院系-专业联动管理</h2>
        
        <!-- 提示信息 -->
        <?php if (isset($success_msg)): ?>
            <p class="success"><?php echo $success_msg; ?></p>
        <?php endif; ?>
        <?php if (isset($error_msg)): ?>
            <p class="error"><?php echo $error_msg; ?></p>
        <?php endif; ?>

        <!-- 院系下拉框 -->
        <div class="form-group">
            <label>选择院系：</label>
            <select id="facultySelect">
                <option value="">请选择院系</option>
                <?php foreach ($faculties as $faculty): ?>
                    <option value="<?php echo $faculty['id']; ?>"><?php echo $faculty['name']; ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <!-- 专业下拉框 -->
        <div class="form-group">
            <label>对应专业：</label>
            <select id="departmentSelect">
                <option value="">请先选择院系</option>
            </select>
        </div>

        <!-- 新增专业表单 -->
        <div class="form-group">
            <label>新增专业：</label>
            <form method="post">
                <input type="hidden" id="facultyIdInput" name="faculty_id" value="">
                <input type="text" name="department_name" placeholder="输入专业名称" required>
                <button type="submit" name="add_department" id="addBtn" disabled>新增专业</button>
            </form>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const facultySelect = document.getElementById('facultySelect');
        const departmentSelect = document.getElementById('departmentSelect');
        const facultyIdInput = document.getElementById('facultyIdInput');
        const addBtn = document.getElementById('addBtn');

        // 监听院系选择变化
        facultySelect.addEventListener('change', function() {
            const facultyId = this.value;
            departmentSelect.innerHTML = '<option value="">加载中...</option>';
            addBtn.disabled = !facultyId;
            facultyIdInput.value = facultyId;

            if (!facultyId) {
                departmentSelect.innerHTML = '<option value="">请先选择院系</option>';
                return;
            }

            // 发送AJAX请求获取专业列表
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `index.php?action=get_departments&faculty_id=${facultyId}`, true);
            xhr.onload = function() {
                if (this.status === 200) {
                    const departments = JSON.parse(this.responseText);
                    let options = '<option value="">请选择专业</option>';
                    departments.forEach(dept => {
                        options += `<option value="${dept.id}">${dept.name}</option>`;
                    });
                    departmentSelect.innerHTML = options;
                } else {
                    departmentSelect.innerHTML = '<option value="">加载失败</option>';
                }
            };
            xhr.send();
        });

        // 处理获取专业列表的AJAX请求
        <?php if (isset($_GET['action']) && $_GET['action'] === 'get_departments' && isset($_GET['faculty_id'])): ?>
            <?php
                $faculty_id = $_GET['faculty_id'];
                $stmt = $pdo->prepare("SELECT id, name FROM department WHERE faculty_id = :faculty_id ORDER BY name");
                $stmt->bindParam(':faculty_id', $faculty_id);
                $stmt->execute();
                $departments = $stmt->fetchAll(PDO::FETCH_ASSOC);
                echo json_encode($departments);
                exit;
            ?>
        <?php endif; ?>
    </script>
</body>
</html>

四、代码说明 #

1. 数据库连接：用PDO实现，比旧的mysql_*函数更安全，支持预处理语句防止SQL注入
2. 新增专业处理：通过POST请求接收表单数据，做了基本的非空校验，插入失败会返回错误信息
3. 联动下拉逻辑：
   • 页面加载时自动渲染所有院系选项
   • 选择院系后，AJAX实时请求后端获取对应专业，动态生成下拉选项
   • 未选择院系时，新增按钮处于禁用状态，避免无效提交
4. 提示反馈：新增成功或失败后，页面顶部会显示对应的提示信息

五、注意事项 #

• 替换代码中的数据库连接信息（$host、$dbname等）为你自己的数据库配置
• 确保你的PHP环境开启了PDO扩展
• 可以根据实际需求调整样式和功能细节（比如添加专业删除、分页等）

内容的提问来源于stack exchange，提问作者user9092892