下拉联动需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></option>并append进去
PHP后端只做一件事：返回标准JSON
单独建一个get_cities.php，它不输出HTML，只查数据库、返回城市列表：
- 开头必须加：
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负责渲染初始页面结构和一级选项
- 把JS逻辑写在独立
.js文件里，或放在
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
