下拉菜单中点击选项时获取其 id 属性
" />
本文介绍如何通过现代 javascript 事件监听方式，准确获取用户选择的 `
在 HTML 表单开发中，常需根据用户选择的 <option> 获取其唯一标识（如 id），而非仅依赖 value 或文本内容。但直接为 <option> 绑定 click 事件是无效且不可靠的——因为 <option> 元素本身不触发独立点击事件（浏览器 UI 限制），真正可监听的是父级 <select> 的 change 事件。
✅ 正确做法是：监听 <select> 的 change 事件，并通过 e.target.selectedOptions[0] 安全访问当前选中的 <option> 元素，再读取其 id 属性：
<select id="dropdown"> <option>Select to scroll to an image</option> <option id="Grounded">Grounded</option> <option id="Lain">Lain</option> <option id="Unfinished">Unfinished Character</option> </select>
document.querySelector('#dropdown').addEventListener('change', function(e) {
const select = e.target;
const selectedOption = select.selectedOptions[0];
// 安全检查：防止未选中（如首项为 placeholder 且无 id）
if (selectedOption && selectedOption.id) {
console.log('Selected option ID:', selectedOption.id);
alert(`ID: ${selectedOption.id}`);
} else {
console.log('No valid ID found — maybe placeholder selected.');
}
});⚠️ 注意事项：
- 不要使用 onclick 绑定在 <option> 上：该行为在多数浏览器中被忽略或不触发，属于语义误用；
- 避免 selectedIndex + options[] 手动索引：虽可行，但不如 selectedOptions 语义清晰且支持多选（即使单选也更健壮）；
- 务必校验 selectedOptions[0] 是否存在：当用户选择无 id 的占位项（如 <option>Select...</option>）时，.id 会返回 undefined，直接调用 .getAttribute('id') 可能返回 null，而 .id 属性更简洁；
- 移除内联 JS（如 onchange="selectOption()"）：遵循关注点分离原则，有利于调试、复用与测试。
? 进阶提示：若需兼容旧版 IE（<10），可回退使用 select.options[select.selectedIndex]，但现代项目推荐以 selectedOptions 为标准写法。
总结：获取选中 <option> 的 id，核心在于监听 <select> 的 change 事件，通过 selectedOptions[0].id 直接提取——代码简短、语义明确、无需修改 HTML 结构，也便于后续扩展（如联动 DOM 操作、AJAX 请求等）。
