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 标准里不存在
<input type="radio">→<select></select>的声明式绑定语法 - 即使把两者包在同一个
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
立即学习“前端免费学习笔记（深入）”；
<form>
<input type="radio" name="region" value="beijing" id="r-bj" checked><label for="r-bj">北京</label>
<input type="radio" name="region" value="shanghai" id="r-sh"><label for="r-sh">上海</label>
<select id="districts"></select>
</form>
<script>
const regions = {
beijing: ['朝阳', '海淀', '西城'],
shanghai: ['浦东', '徐汇', '静安']
};
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}</option>
).join('');
}
radios.forEach(r => r.addEventListener('change', () => updateSelect(r.value)));
updateSelect('beijing'); // 初始化
</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 要能回车确认）。这些细节没处理好，用户一按空格就卡住，比功能缺失还伤体验。
