PHP 實現兩級下拉選單聯動：根據科室動態加載員工列表

需求

第一個下拉選單選擇「科室」，第二個下拉選單動態顯示該科室下的「員工姓名」。

實現架構

1. 前端：第一個 <select> 綁定 onchange 事件，發送 AJAX 請求攜帶科室 ID。
2. 後端 (PHP)：接收科室 ID，查詢數據庫返回該科室員工 JSON 數組。
3. 前端回調：清空第二個 <select>，填充新選項。

關鍵代碼片段

前端 (jQuery)

$('#deptSelect').change(function() {
    var deptId = $(this).val();
    $.get('get_staff.php', {dept_id: deptId}, function(data) {
        var staffSelect = $('#staffSelect').empty();
        staffSelect.append('-請選擇-');
        $.each(data, function(i, staff) {
            staffSelect.append('' + staff.name + '');
        });
    }, 'json');
});

後端 (get_staff.php)

<?php
require 'conn.php';
$deptId = intval($_GET['dept_id']);
$sql = "SELECT yg_num AS id, yg_name AS name FROM yuangong WHERE gzh_renum = ?";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param('i', $deptId);
$stmt->execute();
$result = $stmt->get_result();
$staff = [];
while ($row = $result->fetch_assoc()) $staff[] = $row;
echo json_encode($staff);
?>

注意事項

• 使用預處理語句防止 SQL 注入。
• 數據庫連接建議用 mysqli 或 PDO，避免已棄用的 mysql_* 函數。
• 首次頁面加載時可預填第一個下拉選單，第二個留空或顯示「請先選擇科室」。