本文介绍如何通过现代 javascript 监听 `
在 Web 开发中，常需根据用户选择的下拉项执行逻辑（如跳转锚点、加载内容或触发动画）。但许多开发者误将 click 事件绑定到
✅ 推荐方案：使用 change 事件 + selectedOptions
<select id="dropdown"> <option value="">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]; // 始终返回首个选中项（单选下拉）
if (selectedOption && selectedOption.id) {
console.log('Selected option ID:', selectedOption.id);
// 示例：滚动到对应 ID 的元素
// document.getElementById(selectedOption.id)?.scrollIntoView();
} else {
console.log('No valid ID found — maybe placeholder was selected.');
}
});? 关键点说明：selectedOptions 是一个 HTMLCollection，即使 未设置 multiple，它也始终存在且至少包含一个元素（当有选项被选中时）；使用 selectedOption.id 比 getAttribute('id') 更简洁高效，且语义更清晰；务必检查 selectedOption 是否存在（例如用户选中了无 id 的占位符 ），避免 Cannot read property 'id' of undefined 错误。
⚠️ 为什么你之前的写法不工作？
- ❌ dropdown.options[dropdown.selectedIndex].text.addEventListener(...)：.text 返回字符串，不是 DOM 元素，无法绑定事件；
- ❌ 在
- ❌ selectElement.addEventListener('click', ...)：click 触发于
? 进阶提示：支持多选与空值处理
若需支持多选（
select.addEventListener('change', () => {
Array.from(select.selectedOptions).forEach(opt => {
console.log('ID:', opt.id, 'Text:', opt.text);
});
});同时建议为默认占位符
<option value="" disabled selected>Select to scroll to an image</option>
✅ 总结
获取下拉选项 ID 的核心原则是：监听 。该方法简洁、标准、兼容性好（支持所有现代浏览器及 IE11+），无需内联 JS、不污染 HTML 结构，也便于后续扩展（如联动更新、表单验证等）。务必避免对
