在web开发中，实现联动下拉列表（或称级联选择器）是一个常见的需求，例如根据选择的公司动态展示其旗下的游戏。这种功能的核心在于，当用户在一个下拉框中做出选择时，另一个下拉框的内容能够即时地根据前者的选择进行过滤和更新。虽然服务器端（如php）可以实现此功能，但为了提供更流畅的用户体验和减少服务器请求，客户端javascript是实现这种动态交互的理想选择。
首先，我们需要准备好两个下拉列表的HTML结构。为了能够通过JavaScript准确地定位并操作这些元素，为它们添加唯一的id属性是至关重要的。初始时，第二个下拉列表可以为空，其内容将由JavaScript动态填充。
<div class="form-group">
<label for="company">公司名称</label>
<select name="company" id="company" autocomplete="off">
<option value="">--请选择公司--</option>
<option value="company - 1">公司 A</option>
<option value="company - 2">公司 B</option>
<option value="company - 3">公司 C</option>
</select>
</div>
<div class="form-group">
<label for="game">游戏名称</label>
<select name="game" id="game" autocomplete="off">
<!-- 初始为空，将由 JavaScript 动态填充 -->
</select>
</div>说明：
核心的联动逻辑将通过JavaScript实现。我们将监听第一个下拉列表（公司）的change事件（或input事件），当用户选择不同的公司时，获取其值，并据此更新第二个下拉列表（游戏）的内容。
document.getElementById("company").addEventListener("change", function() {
var selectedCompany = this.value; // 获取当前选中的公司值
var gameSelect = document.getElementById("game"); // 获取游戏下拉列表元素
gameSelect.innerHTML = ''; // 清空当前游戏列表
// 根据选中的公司值动态生成游戏选项
if (selectedCompany === "company - 1") {
gameSelect.innerHTML = `
<option value="game-xyz">游戏 XYZ</option>
<option value="game-xyz2">游戏 XYZ2</option>
`;
} else if (selectedCompany === "company - 2") {
gameSelect.innerHTML = `
<option value="game-abc">游戏 ABC</option>
<option value="game-abc2">游戏 ABC2</option>
`;
} else if (selectedCompany === "company - 3") {
gameSelect.innerHTML = `
<option value="game-pqr">游戏 PQR</option>
<option value="game-pqr2">游戏 PQR2</option>
`;
} else {
// 如果未选择任何公司或选择的是默认选项，清空游戏列表
gameSelect.innerHTML = '<option value="">--请选择游戏--</option>';
}
});
// 页面加载时初始化游戏列表（可选，根据需求决定是否需要默认值）
document.addEventListener("DOMContentLoaded", function() {
// 触发一次 change 事件，以确保页面加载时游戏列表根据默认公司选项（如果有）进行初始化
// 如果公司下拉框有默认选中项，此行会使其联动
document.getElementById("company").dispatchEvent(new Event('change'));
});代码解析：
立即学习“Java免费学习笔记（深入）”；
上述JavaScript实现对于数据量较小且相对固定的场景非常有效。然而，它存在一些局限性：
为了解决这些问题，我们可以采用以下优化方案：
对于中等规模的数据，可以将公司与游戏的映射关系存储在一个JavaScript对象中，使代码更简洁。
const companyGamesMap = {
"company - 1": [
{ value: "game-xyz", text: "游戏 XYZ" },
{ value: "game-xyz2", text: "游戏 XYZ2" }
],
"company - 2": [
{ value: "game-abc", text: "游戏 ABC" },
{ value: "game-abc2", text: "游戏 ABC2" }
],
"company - 3": [
{ value: "game-pqr", text: "游戏 PQR" },
{ value: "game-pqr2", text: "游戏 PQR2" }
]
// ... 更多公司和游戏
};
document.getElementById("company").addEventListener("change", function() {
var selectedCompany = this.value;
var gameSelect = document.getElementById("game");
gameSelect.innerHTML = '<option value="">--请选择游戏--</option>'; // 添加默认选项
if (selectedCompany && companyGamesMap[selectedCompany]) {
companyGamesMap[selectedCompany].forEach(game => {
const option = document.createElement('option');
option.value = game.value;
option.textContent = game.text;
gameSelect.appendChild(option);
});
}
});对于数据量大或经常变动的情况，最佳实践是使用AJAX（Asynchronous JavaScript and XML）技术从服务器动态获取数据。
服务器端接口 (PHP)：创建一个PHP脚本（例如get_games.php），它接收一个公司ID作为参数，并返回该公司的游戏列表（通常是JSON格式）。
// get_games.php
<?php
header('Content-Type: application/json');
$companyId = $_GET['company_id'] ?? '';
$games = [];
// 假设 $dbh 是你的 PDO 数据库连接
// $sql = "SELECT gamename, gameid FROM clientgames WHERE company = :companyId";
// $query = $dbh->prepare($sql);
// $query->bindParam(':companyId', $companyId);
// $query->execute();
// $results = $query->fetchAll(PDO::FETCH_ASSOC);
// 示例数据，实际应从数据库获取
if ($companyId === 'company - 1') {
$games = [
['value' => 'game-xyz', 'text' => '游戏 XYZ'],
['value' => 'game-xyz2', 'text' => '游戏 XYZ2']
];
} else if ($companyId === 'company - 2') {
$games = [
['value' => 'game-abc', 'text' => '游戏 ABC'],
['value' => 'game-abc2', 'text' => '游戏 ABC2']
];
} else if ($companyId === 'company - 3') {
$games = [
['value' => 'game-pqr', 'text' => '游戏 PQR'],
['value' => 'game-pqr2', 'text' => '游戏 PQR2']
];
}
echo json_encode($games);
?>客户端 JavaScript (使用 fetch API)：
document.getElementById("company").addEventListener("change", function() {
var selectedCompany = this.value;
var gameSelect = document.getElementById("game");
gameSelect.innerHTML = '<option value="">--加载中...--</option>'; // 加载提示
if (selectedCompany) {
fetch(`get_games.php?company_id=${encodeURIComponent(selectedCompany)}`)
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败');
}
return response.json();
})
.then(games => {
gameSelect.innerHTML = '<option value="">--请选择游戏--</option>'; // 清空并添加默认选项
if (games && games.length > 0) {
games.forEach(game => {
const option = document.createElement('option');
option.value = game.value;
option.textContent = game.text;
gameSelect.appendChild(option);
});
} else {
gameSelect.innerHTML = '<option value="">--暂无游戏--</option>';
}
})
.catch(error => {
console.error('获取游戏数据失败:', error);
gameSelect.innerHTML = '<option value="">--加载失败--</option>';
});
} else {
gameSelect.innerHTML = '<option value="">--请选择游戏--</option>';
}
});注意事项：
通过JavaScript实现基于前置选择的动态下拉列表，能够显著提升用户界面的交互性和响应速度。对于小型固定数据集，直接在客户端JavaScript中管理数据是可行的。而对于大型或动态数据集，结合AJAX技术从服务器端按需加载数据是更健壮和可维护的解决方案。选择哪种方法取决于具体的项目需求、数据规模和性能考量。
以上就是基于前置选择动态筛选下拉列表：JavaScript 实现指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
577
收藏
