data-*属性仅存静态字符串，不自动保存用户选择；真正保存需javascript主动读取selectedoptions[0].dataset并用setattribute同步到上，注意空值判断、ie11兼容性及属性名规范。
data-* 属性本身不保存用户选择，它只存静态字符串；真正“保存选择”必须靠 JavaScript 主动读取、修改并同步到 DOM 上。
给 <option></option> 加 data-* 存每项专属数据
下拉框的用户选择本质是选中某个 <option></option>，所以 data 属性必须写在 <option></option> 里，而不是 <select></select> 标签上。
- ✅ 正确写法：
<option value="202" data-user-id="1001" data-dept="eng">张工</option> - ❌ 错误写法：把
data-user-id写在<select></select>上——所有选项共用一个值，无法区分 - 读取时用
select.selectedOptions[0]?.dataset，注意空值判断（比如刚加载还没选） - IE11 不支持
selectedOptions，得回退到select.options[select.selectedIndex]
用 getAttribute() 读取比 dataset 更稳
很多人用 el.dataset.userId 读不到值，不是 JS 写错了，而是 HTML 里属性名不规范或含数字。
-
data-user-id="123"→el.dataset.userId✅ -
data-1st-choice="true"→el.dataset["1stChoice"]✅（点号语法失效），但el.getAttribute("data-1st-choice")✅ 更直白 -
data-api-key="abc-xyz"→dataset.apiKey会变成"abcXyz"，丢失原始分隔符，getAttribute才能拿到原样字符串 - 所有值都是字符串：
getAttribute("data-is-active") === "true"才是真布尔逻辑，别信Boolean(el.dataset.isActive)
修改 data 值必须用 setAttribute()
dataset.xxx = "new" 看起来生效，但只是内存映射，DOM 属性没变，CSS 选择器和后续 JS 都可能读不到更新后的值。
- ✅ 正确写法：
option.setAttribute("data-selected", "true") - ❌ 错误写法：
option.dataset.selected = "true"—— DevTools 里看不到变化，[data-selected]CSS 也不匹配 - 批量设置多个 data 属性？别循环
setAttribute，用：Object.entries(data).forEach(([k, v]) => el.setAttribute(`data-${k}`, v)) - 删除必须用：
el.removeAttribute("data-selected")，delete el.dataset.selected完全无效
data-* 不是状态存储，别指望它跨刷新保留
页面刷新后，你 JS 改过的 data-* 全部消失，只剩 HTML 初始写的那部分。它只适合存“当前会话内可丢弃”的上下文信息。
- 需要记住用户上次选了什么？用
localStorage.setItem("lastSelect", value) - 要持久化复杂结构（如选中的多条记录 + 时间戳）？用
JSON.stringify()存进localStorage或发请求到后端 - data-* 适合的场景：标记选项类型（
data-role="admin"）、调试开关（data-dev-mode="on"）、CSS 钩子（[data-loaded="true"]） - 千万别把敏感字段（如 token、权限列表）塞进 data-*，HTML 源码里明文可见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
