实现动态下拉菜单过滤：基于用户选择的客户端游戏列表展示

<div class="form-group">
    <label for="company">Company Name</label>
    <select name="company" autocomplete="off">
        <?php
        // PHP代码填充公司列表
        $sql = "SELECT * from clients having manager like '%$uname%'";
        $query = $dbh->prepare($sql);
        $query->execute();
        $results = $query->fetchAll(PDO::FETCH_OBJ);
        if ($query->rowCount() > 0) {
            foreach ($results as $result) { ?>
                <option value="<?php echo htmlentities($result->company); ?>"><?php echo htmlentities($result->company); ?></option>
            <?php }
        } ?>
    </select>
</div>

<div class="form-group">
    <label for="game">Game Name</label>
    <select name="game" autocomplete="off">
        <?php
        // PHP代码填充游戏列表，这里的查询条件是静态的
        $sql = "SELECT * from clientgames having company like '%..........????......%'";
        $query = $dbh->prepare($sql);
        $query->execute();
        $results = $query->fetchAll(PDO::FETCH_OBJ);
        if ($query->rowCount() > 0) {
            foreach ($results as $result) { ?>
                <option value="<?php echo htmlentities($result->gamename); ?>"><?php echo htmlentities($result->gamename); ?></option>
            <?php }
        } ?>
    </select>
</div>

<select name="company" id="company">
    <option value="">--请选择公司--</option>
    <option value="company - 1">公司 A</option>
    <option value="company - 2">公司 B</option>
    <option value="company - 3">公司 C</option>
</select>

<select name="game" id="game">
    <!-- 游戏列表将由JavaScript动态填充 -->
    <option value="">--请选择游戏--</option>
</select>

document.getElementById("company").onchange = function() { // 使用 onchange 事件更符合下拉菜单选择的语义

    var selected_company = this.value; // 获取当前选中的公司值
    var gameSelect = document.getElementById("game"); // 获取游戏下拉菜单元素

    // 清空当前游戏列表，并添加默认选项
    gameSelect.innerHTML = '<option value="">--请选择游戏--</option>';

    if (selected_company === "company - 1") {
        gameSelect.innerHTML += '<option value="game_xyz">游戏 XYZ</option>';
        gameSelect.innerHTML += '<option value="game_xyz2">游戏 XYZ2</option>';
    } else if (selected_company === "company - 2") {
        gameSelect.innerHTML += '<option value="game_abc">游戏 ABC</option>';
        gameSelect.innerHTML += '<option value="game_abc2">游戏 ABC2</option>';
    } else if (selected_company === "company - 3") {
        gameSelect.innerHTML += '<option value="game_pqr">游戏 PQR</option>';
        gameSelect.innerHTML += '<option value="game_pqr2">游戏 PQR2</option>';
    }
    // 如果没有匹配的公司，游戏列表将只包含默认选项
};

// 页面加载时，如果公司下拉菜单有默认值，可以触发一次更新
// 例如：如果页面加载时 company - 1 默认选中，可以手动触发一次 change 事件
// var initialCompany = document.getElementById("company").value;
// if (initialCompany) {
//     document.getElementById("company").onchange();
// }

document.getElementById("company").onchange = function() {
    var selected_company_id = this.value;
    var gameSelect = document.getElementById("game");
    gameSelect.innerHTML = '<option value="">--加载中...--</option>'; // 加载提示

    if (!selected_company_id) {
        gameSelect.innerHTML = '<option value="">--请选择游戏--</option>';
        return;
    }

    // 发送AJAX请求
    fetch('/api/get-games-by-company?company_id=' + selected_company_id)
        .then(response => response.json())
        .then(data => {
            gameSelect.innerHTML = '<option value="">--请选择游戏--</option>'; // 清空并添加默认选项
            if (data.length > 0) {
                data.forEach(game => {
                    var option = document.createElement('option');
                    option.value = game.id; // 假设游戏数据包含id和name
                    option.textContent = game.name;
                    gameSelect.appendChild(option);
                });
            } else {
                gameSelect.innerHTML = '<option value="">--无可用游戏--</option>';
            }
        })
        .catch(error => {
            console.error('获取游戏数据失败:', error);
            gameSelect.innerHTML = '<option value="">--加载失败--</option>';
        });
};