如何监听 中选项被选中的事件并获取自定义属性

中选项被选中的事件并获取自定义属性 ” />

`

在现代 Web 开发中，

所幸，我们可以通过一个简洁可靠的模式来弥补这一缺失：

✅ 核心思路：input 事件 + 属性选择器动态匹配

由于

1. 获取当前输入值；
2. 通过 input[list] 属性定位关联的
3. 使用 css 属性选择器（option[value=”…”]）查找匹配的；
4. 从中读取 data-id 等自定义属性并执行业务逻辑（如发起 ajax 请求）。

以下是可直接运行的完整示例：

document.querySelector('#search-input').addEventListener('input', (evt) => {   const input = evt.target;   const value = input.value.trim();    // 仅在值非空且匹配 datalist 选项时处理（避免误触发）   if (!value) return;    const listId = input.getAttribute('list');   if (!listId) return;    // 安全转义 value，防止特殊字符破坏选择器（如引号、反斜杠）   const escapedValue = value.replace(/["'\]/g, '\$&');   const option = document.querySelector(`#${listId} option[value="${escapedValue}"]`);    if (option) {     const itemId = option.getAttribute('data-id');     const category = option.getAttribute('data-category');      console.log('✅ 已选中商品:', { id: itemId, name: value, category });      // ✅ 此处可安全发起 AJAX 请求     // fetch(`/api/items/${itemId}`).then(...);   } });

⚠️ 注意事项与最佳实践

• input 事件 vs change 事件：必须使用 input（而非 change），因为 change 仅在失焦且值改变后触发，无法响应 Enter 键即时选择。
• 值匹配的精确性：
• 特殊字符转义：若 包含双引号、单引号或反斜杠，需转义后再用于属性选择器，否则查询失败。示例中已提供基础转义逻辑，生产环境可考虑使用 CSS.escape()（兼容性注意）。
• 性能考量：对于超大选项列表（>1000 项），遍历 options 集合比 CSS 选择器更可控，可改用：

  const datalist = document.getElementById(listId); const matched = Array.from(datalist.options).find(opt => opt.value === value);

✅ 替代方案简评

若需更复杂的交互（如高亮匹配片段、分组、异步加载），原生