Codeigniter注册表单：选择部门自动填充主管字段实现方法

嘿，这个需求挺常见的，实现起来不难，分两种场景给你详细说下具体做法：

如果你的部门和主管信息是固定不变的，直接用前端JavaScript就能搞定：

1. 先确保HTML里的部门下拉框和主管输入框有明确的ID（方便JS获取元素）：

<!-- 部门选择下拉框 -->
<select id="department" name="department" class="form-control">
    <option value="">请选择部门</option>
    <option value="A">A部门</option>
    <option value="B">B部门</option>
    <option value="C">C部门</option>
</select>

<!-- 主管输入框，加readonly防止手动修改（不需要的话可以去掉） -->
<input type="text" id="supervisor" name="supervisor" class="form-control" readonly>

2. 接着添加一段JavaScript代码，监听部门选择的变化事件，自动填充主管：

// 先定义好部门和主管的对应关系
const deptSupervisorMap = {
    "A": "张三",
    "B": "李四",
    "C": "王五"
};

// 获取页面上的DOM元素
const departmentSelect = document.getElementById('department');
const supervisorInput = document.getElementById('supervisor');

// 监听下拉框的选择变化
departmentSelect.addEventListener('change', function() {
    const selectedDept = this.value;
    // 根据选择的部门匹配主管，没匹配到就清空输入框
    supervisorInput.value = deptSupervisorMap[selectedDept] || '';
});

如果你的部门和主管数据存在数据库里，或者经常更新，就需要通过AJAX请求后端接口来获取对应主管：

1. 前端JavaScript代码（用原生fetch API，不需要额外引入库）：

const departmentSelect = document.getElementById('department');
const supervisorInput = document.getElementById('supervisor');

departmentSelect.addEventListener('change', function() {
    const selectedDeptId = this.value;
    
    // 如果没选择部门，清空主管输入框
    if (!selectedDeptId) {
        supervisorInput.value = '';
        return;
    }

    // 发送请求到后端接口，获取对应主管信息
    fetch(`/get-supervisor?dept_id=${selectedDeptId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                supervisorInput.value = data.supervisor_name;
            } else {
                supervisorInput.value = '';
                // 可选：添加提示，比如 alert('未找到该部门的主管')
            }
        })
        .catch(error => {
            console.error('获取主管信息失败:', error);
            supervisorInput.value = '';
        });
});

2. 后端PHP接口示例（假设你用PDO操作数据库）：

<?php
// 这里需要先完成数据库连接（比如$pdo = new PDO(...)）
$deptId = $_GET['dept_id'] ?? '';
$response = ['success' => false, 'supervisor_name' => ''];

if ($deptId) {
    // 从数据库查询对应部门的主管，SQL语句根据你的实际表结构调整
    $sql = "SELECT supervisor_name FROM departments WHERE id = ?";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$deptId]);
    $deptInfo = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($deptInfo) {
        $response['success'] = true;
        $response['supervisor_name'] = $deptInfo['supervisor_name'];
    }
}

// 返回JSON格式的响应
header('Content-Type: application/json');
echo json_encode($response);
?>

额外注意点 #

• 如果不希望用户修改主管信息，给输入框加readonly属性（比disabled好，因为disabled的输入框不会随表单提交）；
• 动态接口要注意安全性，比如验证dept_id的合法性，防止SQL注入（上面的示例用了预处理语句，已经做了防护）；
• 如果项目里用了jQuery，也可以用$.ajax替代fetch，写法更简洁，但原生JS现在已经足够好用啦。

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