应在标签内添加data-*属性以存储业务数据，而非放在上；javaScript通过selectedOptions[0].dataset读取，注意空值判断和IE11兼容性。
给 data-* 属性
html 下拉框本身（）不直接携带业务数据，真正存额外信息的地方是它的每个选项 。浏览器原生支持在 上加任意 data-* 属性，且能被 javascript 正常读取。
常见错误是试图把 data-* 加到 标签上——这虽然合法，但无法按“每项不同”来区分数据；或者用 value 硬塞 jsON 字符串，既难维护又易出错。
-
data-*必须写在内部，不是 - 属性名要符合规范：全小写、用短横线分隔，如
data-user-id、data-category-code - 值建议为字符串；若需结构化数据（如对象），应由 JS 解析，而非存在 HTML 中
用 JavaScript 读取 option 的 data-* 值
选中变化后，通过 select.selectedOptions[0] 拿到当前 元素，再用 dataset 或 getAttribute() 读取。
dataset 会自动将短横线命名转为驼峰（如 data-user-id → dataset.userId），但注意它只返回字符串；若值是数字或布尔，需手动转换。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
selectedOptions[0].dataset.xxx，语义清晰 - 如果属性名含非法字符（如带下划线），只能用
getAttribute('data-xxx') - 务必检查
selectedOptions.length > 0，防止空选择时报错
const select = document.getElementById('product-select'); select.addEventListener('change', () => { const option = select.selectedOptions[0]; if (!option) return; const price = parseFloat(option.dataset.price); const inStock = option.dataset.inStock === 'true'; console.log(`价格：${price}，是否有货：${inStock}`); });动态渲染时如何安全插入带 data-* 的 option
服务端模板（如 EJS、Django）或前端 JS 拼接字符串生成 时，容易因引号嵌套或未转义内容导致 HTML 结构破坏。例如：data-desc="用户说："这个太棒了！"" 会让标签提前闭合。
- 优先使用 dom 方法（
document.createElement+element.dataset）动态创建，完全规避引号问题 - 若必须拼字符串，请对所有
data-*值做 HTML 实体编码（如"→"） - 避免在
data-*中存大量文本或 HTML 片段；大字段应走 API 异步加载
const optionsData = [ { value: 'a1', label: '选项一', 'data-score': '95', 'data-tags': 'high,urgent' }, { value: 'a2', label: '选项二', 'data-score': '72', 'data-tags': 'low,normal' } ]; const select = document.getElementById('dynamic-select'); optionsData.forEach(item => { const opt = document.createElement('option'); opt.value = item.value; opt.textContent = item.label; Object.keys(item).forEach(key => { if (key.startsWith('data-')) { opt.dataset[key.replace('data-', '')] = item[key]; } }); select.appendChild(opt); });兼容性与性能注意点
data-* 属性和 dataset 在 IE11+ 和所有现代浏览器中完全可用，无需 polyfill。但要注意：
- IE11 不支持
dataset的驼峰映射（如data-user-id需用getAttribute('data-user-id')），如需兼容请统一用getAttribute - 大量
option（如上千条）时，每个都挂多个data-*会略微增加 DOM 体积，但通常不影响渲染性能 - 不要用
data-*存敏感信息（如 Token、密码），它们在源码中完全可见
实际项目中最容易忽略的是：**没验证 selectedOptions[0] 是否存在就直接访问 dataset，导致脚本静默失败**。加个空值判断只需一行，却能避免多数运行时异常。