本文详解为何在 ajax 动态填充 `
在 Web 表单恢复场景中（如从 sessionStorage 恢复用户上次填写的数据），常见问题之一是：文本框、单选框等能正常回填，但 。根本原因在于：你试图在 dom 尚未完成更新时设置值，或新插入的。
你的原始代码存在两个关键缺陷：
- php 返回的是 html 字符串，而非结构化数据：ajax 成功回调中 $(‘#channelNum’).html(data) 会完全重写
- .val() 调用时机与 DOM 状态不匹配：即使选项已插入，若 freq 对应的 value 在 HTML 中并不存在（例如大小写不一致、空格差异、或 PHP 未输出该选项），.val() 将静默失败，不会报错，也不会触发选中。
✅ 正确做法是采用 前后端职责分离的 API 思路：PHP 只负责返回纯净的 jsON 数据，前端 javaScript 负责安全渲染并精确控制选中状态。
✅ 推荐解决方案（分步实现）
1. 修改 PHP 后端：返回标准 json 数据
// channelNum.php header('Content-Type: application/json; charset=utf-8'); // 获取 POST 参数（注意：需验证和过滤！） $broadcastMarket = filter_input(INPUT_POST, 'broadcastMarket', FILTER_SANITIZE_STRING); $channelNum = filter_input(INPUT_POST, 'channelNum', FILTER_SANITIZE_STRING); // 执行数据库查询（此处省略连接和防注入逻辑，务必使用 PDO/MySQLi 预处理） $result = $mysqli->query("SELECT `$freqChannels` FROM channels WHERE market = '$broadcastMarket'"); $results = []; if ($result && $result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $value = $row[$freqChannels]; $results[] = [ 'label' => htmlspecialchars($value, ENT_QUOTES, 'UTF-8'), 'value' => $value, 'selected' => ($value === $channelNum) // 严格相等判断 ]; } } echo json_encode($results);⚠️ 注意：htmlspecialchars() 防止 xss；$channelNum 应来自可靠来源（如 session），而非直接信任 POST 输入。
2. 前端 JS：用 JSON 构建选项并显式控制选中
const allData = JSON.parse(sessionStorage.getItem("data")) || []; const freq = allData[0] || ''; // 安全默认值 const broadcastMarket = $("input[type='radio'][name='broadcastMarket']:checked").val(); // 清空并发起请求 $('#channelNum').empty(); $.ajax({ url: "channelNum.php", method: "POST", data: { broadcastMarket, channelNum: freq }, // 直接传 freq 作为预设值 dataType: "json", success: function(data) { if (Array.isArray(data) && data.length > 0) { // 插入默认提示项 $('#channelNum').append( $('3. 关键优势说明
- ✅ 值匹配可靠：item.selected 由后端根据真实数据计算，避免前端字符串匹配误差；
- ✅ DOM 更新原子性：所有
- ✅ 可维护性强：前后端解耦，PHP 不再混杂 HTML 拼接逻辑，便于测试与扩展；
- ✅ 安全性提升：JSON 传输 + htmlspecialchars() 输出，规避 XSS 风险。
? 补充建议
- 若需支持多级联动（如省→市→区），可将此模式封装为通用函数，接收 url、targetSelectId、preselectedValue 等参数；
- 使用 async/await + fetch() 替代 jquery AJAX 可进一步简化逻辑（现代项目推荐）；
- 始终在 success 回调中检查 data 类型（Array.isArray(data)），避免因后端异常返回非数组导致 JS 报错。
通过这一重构，你将彻底解决“AJAX 后 .val() 失效”的顽疾，让表单恢复功能健壮、可预测且易于调试。