JS与PHP无法直接嵌入联动，需通过AJAX交互：JS监听多选框变化并发送请求，PHP接收参数查询数据库后返回JSON，JS解析并动态渲染选项。
JS 和 PHP 不能直接“嵌入”实现前端联动，因为它们运行环境不同：PHP 是服务器端语言，JS 是浏览器端语言。所谓“多选框联动”，比如选中 A 选项后，B 多选框动态更新可选项，这需要 JS 发起请求（如 AJAX），由 PHP 处理数据并返回结果，JS 再更新 DOM。
核心思路：JS 控制交互 + PHP 提供数据接口
前端用 JS 监听多选框变化，触发 AJAX 请求；后端 PHP 接收参数、查数据库或逻辑处理，返回 JSON 数据；JS 解析响应，动态渲染目标多选框的 <option>。
关键步骤与代码示例
1. 前端 HTML + JS（含 AJAX）
假设有两个 <select multiple>：省份（province）和城市（city）：
立即学习“PHP免费学习笔记（深入）”；
<select id="province" multiple>
<option value="gd">广东</option>
<option value="zj">浙江</option>
</select><p><select id="city" multiple disabled>
<option>请选择省份</option>
</select></p><p><script>
document.getElementById('province').addEventListener('change', function() {
const selected = Array.from(this.selectedOptions).map(opt => opt.value);
if (selected.length === 0) return;</p><p>fetch('get_cities.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: 'provinces=' + selected.join(',')
})
.then(res => res.json())
.then(data => {
const citySel = document.getElementById('city');
citySel.innerHTML = ''; // 清空
data.forEach(city => {
const opt = document.createElement('option');
opt.value = city.id;
opt.textContent = city.name;
citySel.appendChild(opt);
});
citySel.disabled = false;
});
});
</script>2. 后端 PHP（get_cities.php）
接收 province 编码，返回对应城市列表（JSON 格式）：
<?php
header('Content-Type: application/json; charset=utf-8');
<p>if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['provinces'])) {
echo json_encode([]);
exit;
}</p><p>$provinces = explode(',', $_POST['provinces']);
// 实际项目中应过滤、校验、防 SQL 注入（如使用 PDO 预处理）
$placeholders = str_repeat('?,', count($provinces) - 1) . '?';
$sql = "SELECT id, name FROM cities WHERE province_code IN ($placeholders)";
$stmt = $pdo->prepare($sql); // 假设已初始化 PDO
$stmt->execute($provinces);
$cities = $stmt->fetchAll(PDO::FETCH_ASSOC);</p><p>echo json_encode($cities);
?>注意事项
- 多选框联动本质是前后端分离协作，PHP 不参与 DOM 操作，只提供数据服务
- 务必对 PHP 接收的参数做合法性校验（如白名单检查 province code），避免注入或越权
- JS 中使用
Array.from(select.selectedOptions)获取所有被选中的 option，兼容多选 - 若需支持“级联多级”（省→市→区），可递归绑定 change 事件，每次只加载下一级数据，减少首屏压力
替代方案（无刷新但更轻量）
如果数据量小且固定，也可把全部映射关系一次性输出为 JS 对象（PHP 渲染时 json_encode() 到内联 script），由 JS 本地查找，避免多次请求：
<script> const cityMap = <?php echo json_encode($cityDataByProvince, JSON_UNESCAPED_UNICODE); ?>; // 然后 JS 直接 cityMap['gd'] 获取广东城市数组 </script>
适合静态配置或数据极少变动的场景。
