使用 innerText 获取选项内容会剥离所有 HTML 标签（如 ），导致选中后内联样式无法保留；应改用 innerHTML 完整复制结构，确保嵌套元素及其样式类正确渲染。
使用 `innertext` 获取选项内容会剥离所有 html 标签（如 ``），导致选中后内联样式无法保留；应改用 `innerhtml` 完整复制结构，确保嵌套元素及其样式类正确渲染。
在自定义下拉菜单开发中，一个常见但易被忽视的问题是：当用户点击某个带格式化内容的选项（例如 <li>Pro Pack <span>$9.99</span>
</li>）后，选中项显示异常——<span></span> 的样式失效、文字合并为纯文本，甚至出现价格重复等 DOM 错乱现象。根本原因在于 JavaScript 中错误地使用了 option.innerText。
innerText 仅返回纯文本内容，它会忽略所有 HTML 标签、属性及嵌套结构。例如：
调用 option.innerText 将返回字符串 "Ultimate Pack $19.99"，而 <span></span> 标签及其 class、style 等全部丢失。后续用该字符串赋值给 .selected.innerHTML，相当于：
selected.innerHTML = "Ultimate Pack $19.99"; // ❌ 无 span，无样式
这直接破坏了 CSS 中为 .selected span 定义的独立样式（如颜色、间距），使价格信息失去视觉区分。
✅ 正确做法是使用 option.innerHTML，它完整保留原始 HTML 结构：
selected.innerHTML = option.innerHTML; // ✅ 保留 <span> 及其内容与属性</span>
这样，.selected 元素将准确渲染为：
<p class="selected">Ultimate Pack <span>$19.99</span></p>
从而确保 .selected span { color: #C00; margin-left: 8px; } 等样式规则正常生效。
? 注意事项：
- 避免混合使用
innerText和innerHTML处理含标签的内容； - 若需对选项内容做安全过滤（防 XSS），应使用
DOMPurify.sanitize()等库处理innerHTML，而非降级为innerText； - 确保
.menu li与.selected的 HTML 结构语义一致（均以<p></p>包裹，内含<span></span>），CSS 选择器才能稳定匹配； - 在初始化时，建议为
.selected设置默认innerHTML（而非仅文本），保持结构一致性。
以下是修复后的核心逻辑片段（已精简）：
options.forEach(option => {
option.addEventListener('click', () => {
// ✅ 关键修复：使用 innerHTML 保留标签结构
selected.innerHTML = option.innerHTML;
// 关闭菜单并更新状态
select.classList.remove('select-clicked');
caret.classList.remove('caret-rotate');
menu.classList.remove('menu-open');
// 同步 active 状态
options.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
});
});
通过这一改动，下拉菜单不仅能正确显示分层文本（如主名称 + 副标题/价格），还能精准应用差异化 CSS 样式，显著提升 UI 专业性与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
