HTML下拉框添加ID实现JS定位方法

• id 值不能含空格、中文、特殊符号（如 id="my-select-1" ✅，id="下拉框1" ❌）
• 同一页面不能有两个相同 id，否则 getElementById() 只返回第一个，且 HTML 校验失败
• 如果下拉框是模板渲染或循环生成（如 Vue/React），确保每个 id 动态唯一，比如拼上索引：id="country-select-{{i}}"

JS 怎么用这个 id 获取下拉框值

拿到元素后，核心是读取 value 或 selectedIndex。注意：只有用户真正选中了某个 ，value 才会更新；初始状态若没设 selected，value 可能为空字符串或第一个 option 的值（取决于浏览器）。

const selectEl = document.getElementById("user-role");
console.log(selectEl.value); // 当前选中的 option 的 value 值
console.log(selectEl.selectedIndex); // 选中项的索引（从 0 开始）
console.log(selectEl.options[selectEl.selectedIndex].text); // 选中文本内容

• 如果下拉框有 disabled，value 仍可读，但无法通过 UI 改变
• selectEl.value 返回的是 管理员 中的 "admin"，不是显示文本
• 监听变化要用 change 事件，不是 click 或 input（下拉框不触发 input）

为什么有时候 getElementById 拿不到元素

最常见原因是 JS 执行时机早于 DOM 加载完成。比如脚本放在 里，而 在 底部，JS 运行时该元素还不存在。

• 解决方法：把 script 放在 前，或用 DOMContentLoaded 包裹：

  document.addEventListener("DOMContentLoaded", () => {
    const el = document.getElementById("status-filter");
    // 此时 DOM 已就绪
  });

• 检查控制台是否报错 Cannot read property 'value' of null —— 这说明 getElementById 返回了 null，即没找到对应 id
• 确认浏览器开发者工具 Elements 面板里，目标

确实存在且 id 拼写完全一致（大小写敏感）

用 name 行不行？和 id 有什么区别