下拉联动需JS与PHP分工协作：JS监听change事件、用fetch请求接口并动态更新二级下拉；PHP提供纯JSON接口，需设置header('Content-Type: application/json; charset=utf-8')、校验参数、防SQL注入、返回标准JSON数组。
前端用JS监听并请求数据
在HTML中放两个select，第一个加载省份（由PHP初始化），第二个留空或带提示：
关键点：给一级下拉框绑定change事件，不能用click；用fetch或XMLHttpRequest请求PHP接口，别刷新整页。
- 获取选中值：
document.getElementById('province').value - 发起请求：
fetch('get_cities.php?pid=' + pid) - 成功后清空二级下拉：
citySelect.innerHTML = '' - 遍历返回的JSON数组，动态创建
<option>并append进去
PHP后端只做一件事：返回标准JSON
单独建一个get_cities.php，它不输出HTML，只查数据库、返回城市列表：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 开头必须加：
header('Content-Type: application/json; charset=utf-8'); - 校验参数：
$pid = isset($_GET['pid']) && is_numeric($_GET['pid']) ? (int)$_GET['pid'] : 0; - 查库时用PDO预处理或至少过滤ID，防SQL注入
- 查出结果后：
echo json_encode($cities);，格式如[{"id":"1","name":"广州市"},{"id":"2","name":"深圳市"}]
JS嵌入方式：推荐分离，非硬塞
不要把大段JS逻辑直接写在<script><?php echo ... ?></script>里。更稳妥的做法是：
立即学习“PHP免费学习笔记（深入）”；
- PHP负责渲染初始页面结构和一级选项
- 把JS逻辑写在独立
.js文件里，或放在</body>前的<script>块中 - 如果必须用PHP变量传参（比如接口路径），可用
data-属性或全局JS变量：<script>const API_URL = "<?php echo htmlspecialchars('/api/get_cities.php', ENT_QUOTES); ?>";</script>
常见卡点和应对
联动失败，90%出在以下几处：
- PHP接口没设
Content-Type: application/json→ JS的response.json()报错 - 中文乱码 → header里加
charset=utf-8，数据库连接也设UTF8 - 跨域问题 → 开发时确保JS和PHP同源；生产环境若需跨域，PHP加
header("Access-Control-Allow-Origin: *") - DOM未就绪就执行JS → 把脚本放
</body>前，或包装在DOMContentLoaded里
