如何基于前序选中的公司筛选后续游戏下拉框可选选项

实现方案 #

你需要实现的是两级联动下拉效果，由于PHP是服务端渲染，页面加载完成后无法直接动态更新游戏下拉选项，推荐用前端预加载映射关系的方案实现，无需额外接口开发，响应速度快，适合游戏数据量不大的场景。

完整修改代码

<!-- 公司下拉框 -->
<div class="form-group">
<label for="company">公司名称</label>
<select id="companySelect" name="company" autocomplete="off">
<?php 
// 优化SQL参数绑定，避免注入风险
$sql = "SELECT * from clients having manager like :uname" ;
$query = $dbh -> prepare($sql);
$query->bindValue(':uname', "%$uname%", PDO::PARAM_STR);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0) {
    // 增加默认空选项引导用户选择
    echo '<option value="">请选择公司</option>';
    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">游戏名称</label>
<select id="gameSelect" name="game" autocomplete="off">
    <option value="">请先选择公司</option>
</select>
</div>

<!-- 联动逻辑代码 -->
<?php
// 预查询所有公司对应的游戏数据，生成映射关系
$gameSql = "SELECT company, gamename FROM clientgames";
$gameQuery = $dbh->prepare($gameSql);
$gameQuery->execute();
$allGames = $gameQuery->fetchAll(PDO::FETCH_ASSOC);
$gameMap = [];
foreach ($allGames as $g) {
    $gameMap[$g['company']][] = $g['gamename'];
}
?>
<script>
// 把PHP生成的映射关系传递给前端JS
const companyGameMap = <?= json_encode($gameMap) ?>;

// 监听公司下拉框选择事件
document.getElementById('companySelect').addEventListener('change', function() {
    const selectedCompany = this.value;
    const gameSelect = document.getElementById('gameSelect');
    // 清空原有选项
    gameSelect.innerHTML = '';
    
    if (!selectedCompany) {
        gameSelect.innerHTML = '<option value="">请先选择公司</option>';
        return;
    }
    
    // 生成对应公司的游戏选项
    const games = companyGameMap[selectedCompany] || [];
    if (games.length === 0) {
        gameSelect.innerHTML = '<option value="">该公司暂无游戏</option>';
        return;
    }
    games.forEach(game => {
        const option = document.createElement('option');
        option.value = game;
        option.textContent = game;
        gameSelect.appendChild(option);
    });
});

// 页面加载完成后初始化游戏下拉框状态
window.addEventListener('load', () => {
    document.getElementById('companySelect').dispatchEvent(new Event('change'));
});
</script>

补充说明

• 如果游戏数据量很大（超过万级），可以改用AJAX方案：公司选择后发送异步请求到后端接口，查询对应公司的游戏列表后再渲染选项，减少页面初始加载体积
• 原有直接拼接变量到SQL语句的写法存在SQL注入风险，上述代码已经优化为PDO参数绑定的写法，安全性更高

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