radio单选框与select下拉列表无原生联动机制，必须通过JavaScript监听change事件并动态更新select内容；name相同或for/id仅影响表单提交和聚焦，不触发状态同步。

radio 单选框本身不能“关联”下拉列表（select）——它们是独立控件，没有原生绑定机制。所谓“联动”，必须靠 JavaScript 手动监听 change 事件，再动态修改 select 的 options 或 value。

为什么直接写 name 相同或加 for/id 不起作用？

很多人误以为给 input type="radio" 和 select 设相同 name 就能联动，其实完全无效：name 只影响表单提交时的键名，不触发任何行为；label for 也只作用于点击聚焦，无法跨标签类型传递状态。

• radio 和 select 属于不同表单元素，浏览器不会自动同步它们的值或选项
• HTML 标准里不存在 → 的声明式绑定语法
• 即使把两者包在同一个 form 里，提交时也各自按自己的 name 发送数据，互不感知

怎么用 JavaScript 实现 radio 控制 select 的选项？

典型场景：用户选中 “地区：北京”，下拉列表自动切换为北京的区县（朝阳、海淀…）；选 “上海”，则更新为浦东、徐汇等。

• 给每组 radio 设置统一 name（如 region），并为每个添加有意义的 value（如 "beijing"）
• 为 select 设置 id（如 districts），方便 JS 获取
• 监听 radio 的 change 事件，根据 e.target.value 动态填充 select.innerHTML 或重置 select.options
• 别忘了首次加载时默认选一个 radio 并初始化 select，否则页面打开时下拉列表为空

简例：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

北京 上海

<script> const regions = { beijing: ['&#26397;&#38451;', '&#28023;&#28096;', '&#35199;&#22478;'], shanghai: ['&#28006;&#19996;', '&#24464;&#27719;', '&#38745;&#23433;'] }; const select = document.getElementById('districts'); const radios = document.querySelectorAll('input[name="region"]'); function updateSelect(value) { select.innerHTML = regions[value].map(d => <option value="${d}">${d} ).join(''); } radios.forEach(r => r.addEventListener('change', () => updateSelect(r.value))); updateSelect('beijing'); // &#21021;&#22987;&#21270; </script>

容易踩的坑：disabled、value 匹配、多级联动

真实项目里联动常比示例复杂，这几个点高频出错：

• 用户切换 radio 后，如果之前 select 是 disabled 状态，JS 更新完 options 后记得 select.disabled = false，否则仍不可操作
• 后端返回的 value 常带空格或大小写不一致（如 "BEIJING"），JS 中要用 .trim().toLowerCase() 统一处理再查表
• 做三级联动（省→市→区）时，不要一次性把所有数据塞进 JS 对象；建议用 API 按需请求，避免首屏加载过大，且要清空下级 select 的 innerHTML 再填新内容，否则选项会叠加
• 如果用框架（如 Vue/React），别手动操作 DOM；应改用响应式数据驱动，否则和框架状态不同步

真正难的不是写几行 JS，而是想清楚数据来源、缓存策略、错误 fallback（比如 API 失败时保留上次选项还是清空）、以及键盘导航支持（radio 要能用 Tab 切换，select 要能回车确认）。这些细节没处理好，用户一按空格就卡住，比功能缺失还伤体验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！