前端动态筛选：基于级联选择器实现下拉列表联动

<div class="form-group">
    <label for="companySelect">公司名称</label>
    <select name="company" id="companySelect" autocomplete="off">
        <option value="">-- 请选择公司 --</option>
        <!-- 公司的选项将由PHP或JS初始填充 -->
    </select>
</div>

<div class="form-group">
    <label for="gameSelect">游戏名称</label>
    <select name="game" id="gameSelect" autocomplete="off">
        <!-- 游戏的选项将由JavaScript动态填充 -->
    </select>
</div>

<?php
// 假设 $dbh 已经是一个有效的PDO数据库连接实例
// 通常，数据库连接配置会放在单独的文件中，如 'db_config.php'
// require_once 'db_config.php'; 

try {
    // 示例：从 clients 表中查询所有公司名称
    $sql = "SELECT DISTINCT company FROM clients ORDER BY company";
    $query = $dbh->prepare($sql);
    $query->execute();
    $companies = $query->fetchAll(PDO::FETCH_OBJ);
} catch (PDOException $e) {
    // 错误处理
    error_log("数据库查询失败: " . $e->getMessage());
    $companies = []; // 确保在出错时 $companies 仍为数组
}
?>

<div class="form-group">
    <label for="companySelect">公司名称</label>
    <select name="company" id="companySelect" autocomplete="off">
        <option value="">-- 请选择公司 --</option>
        <?php
        if (!empty($companies)) {
            foreach ($companies as $company) {
                // 使用 htmlentities 防止XSS攻击
                echo '<option value="' . htmlentities($company->company) . '">' . htmlentities($company->company) . '</option>';
            }
        }
        ?>
    </select>
</div>

document.addEventListener('DOMContentLoaded', function() {
    const companySelect = document.getElementById('companySelect');
    const gameSelect = document.getElementById('gameSelect');

    // 监听公司选择框的变化事件
    companySelect.onchange = function() {
        const selectedCompany = this.value; // 获取当前选中的公司值
        let gameOptions = ''; // 用于构建游戏选项的HTML字符串

        // 根据选中的公司动态生成游戏选项
        if (selectedCompany === 'company-1') {
            gameOptions = '<option value="game-xyz">游戏XYZ</option>' +
                          '<option value="game-xyz2">游戏XYZ2</option>';
        } else if (selectedCompany === 'company-2') {
            gameOptions = '<option value="game-abc">游戏ABC</option>' +
                          '<option value="game-abc2">游戏ABC2</option>';
        } else if (selectedCompany === 'company-3') {
            gameOptions = '<option value="game-pqr">游戏PQR</option>' +
                          '<option value="game-pqr2">游戏PQR2</option>';
        } else {
            // 如果没有选中公司或选中了默认选项，则清空游戏列表或显示默认提示
            gameOptions = '<option value="">-- 请选择游戏 --</option>';
        }

        // 更新游戏下拉列表的innerHTML
        gameSelect.innerHTML = gameOptions;
    };

    // 页面加载时，确保游戏下拉列表显示默认提示
    gameSelect.innerHTML = '<option value="">-- 请选择游戏 --</option>';
});

document.addEventListener('DOMContentLoaded', function() {
    const companySelect = document.getElementById('companySelect');
    const gameSelect = document.getElementById('gameSelect');

    companySelect.onchange = function() {
        const selectedCompany = this.value;

        // 清空当前游戏列表并显示加载提示
        gameSelect.innerHTML = '<option value="">加载中...</option>'; 

        if (!selectedCompany) {
            // 如果没有选中公司或选中了默认选项，则清空游戏列表并返回
            gameSelect.innerHTML = '<option value="">-- 请选择游戏 --</option>';
            return;
        }

        // 使用 Fetch API 发送AJAX请求
        // 注意：'get_games.php' 是一个后端接口，负责根据公司名称返回游戏列表
        fetch('get_games.php?company=' + encodeURIComponent(selectedCompany))
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json(); // 解析JSON格式的响应体
            })
            .then(data => {
                let gameOptions = '<option value="">-- 请选择游戏 --</option>';
                if (data.length > 0) {
                    data.forEach(game => {
                        // 假设后端返回的数据中每个游戏对象都有一个 'gamename' 属性
                        gameOptions += `<option value="${game.gamename}">${game.gamename}</option>`;
                    });
                }
                gameSelect.innerHTML = gameOptions; // 更新游戏下拉列表
            })
            .catch(error => {
                console.error('获取游戏数据失败:', error);
                gameSelect.innerHTML = '<option value="">加载失败</option>'; // 显示错误提示
            });
    };

    // 页面加载时，确保游戏下拉列表显示默认提示
    gameSelect.innerHTML = '<option value="">-- 请选择游戏 --</option>';
});

<?php
// 设置响应头为JSON，告诉浏览器返回的是JSON数据
header('Content-Type: application/json');

// 假设 $dbh 已经是一个有效的PDO数据库连接实例
// require_once 'db_config.php'; 

// 获取GET参数中的公司名称，并进行安全性检查
$company = $_GET['company'] ?? ''; 

if (empty($company)) {
    echo json_encode([]); // 如果公司名称为空，返回空数组
    exit;
}

$games = []; // 初始化游戏数组

try {
    // 示例：从 clientgames 表中查询与特定公司相关的游戏
    // 使用预处理语句防止SQL注入
    $sql = "SELECT gamename FROM clientgames WHERE company = :company ORDER BY gamename";
    $query = $dbh->prepare($sql);
    $query->bindParam(':company', $company, PDO::PARAM_STR); // 绑定参数
    $query->execute();
    $games = $query->fetchAll(PDO::FETCH_OBJ); // 获取所有结果
} catch (PDOException $e) {
    // 错误处理，记录日志，但不直接暴露给前端
    error_log("获取游戏数据失败: " . $e->getMessage());
    // 可以选择返回一个空数组或错误状态
}

// 将结果编码为JSON并输出
echo json_encode($games);
?>