应在<option>标签内添加data-*属性以存储业务数据，而非放在<select>上；JavaScript通过selectedOptions[0].dataset读取，注意空值判断和IE11兼容性。
给 <select> 的 <option> 添加 data-* 属性
HTML 下拉框本身（<select>）不直接携带业务数据，真正存额外信息的地方是它的每个选项 <option>。浏览器原生支持在 <option> 上加任意 data-* 属性，且能被 JavaScript 正常读取。
常见错误是试图把 data-* 加到 <select> 标签上——这虽然合法，但无法按“每项不同”来区分数据；或者用 value 硬塞 JSON 字符串，既难维护又易出错。
-
data-*必须写在<option>内部，不是<select> - 属性名要符合规范：全小写、用短横线分隔，如
data-user-id、data-category-code - 值建议为字符串；若需结构化数据（如对象），应由 JS 解析，而非存在 HTML 中
<select id="product-select"> <option value="p1" data-price="29.99" data-in-stock="true">基础版</option> <option value="p2" data-price="49.99" data-in-stock="false">专业版</option> <option value="p3" data-price="89.99" data-in-stock="true">企业版</option> </select>
用 JavaScript 读取 option 的 data-* 值
选中变化后，通过 select.selectedOptions[0] 拿到当前 <option> 元素，再用 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 拼接字符串生成 <option> 时，容易因引号嵌套或未转义内容导致 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，导致脚本静默失败**。加个空值判断只需一行，却能避免多数运行时异常。 
