下拉菜单中点击选项时获取其 id 属性
" />
本文介绍如何通过现代 javascript 事件监听方式，准确获取用户选择的 `
在 HTML 表单开发中，常需根据用户选择的
✅ 正确做法是：监听
<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 绑定在 ：该行为在多数浏览器中被忽略或不触发，属于语义误用；
- 避免 selectedIndex + options[] 手动索引：虽可行，但不如 selectedOptions 语义清晰且支持多选（即使单选也更健壮）；
- 务必校验 selectedOptions[0] 是否存在：当用户选择无 id 的占位项（如 ）时，.id 会返回 undefined，直接调用 .getAttribute('id') 可能返回 null，而 .id 属性更简洁；
- 移除内联 JS（如 onchange="selectOption()"）：遵循关注点分离原则，有利于调试、复用与测试。
? 进阶提示：若需兼容旧版 IE（
总结：获取选中
