使用 innerText 获取选项内容会剥离所有 HTML 标签（如 ），导致样式失效；应改用 innerHTML 完整保留嵌套结构与语义，确保选中项正确渲染并支持独立样式控制。
使用 `innertext` 获取选项内容会剥离所有 html 标签（如 ``），导致样式失效；应改用 `innerhtml` 完整保留嵌套结构与语义，确保选中项正确渲染并支持独立样式控制。
在自定义下拉菜单开发中，一个常见但易被忽视的问题是：当选项内包含带样式的嵌套元素（例如 <p><span>Free</span></p>）时，若通过 option.innerText 提取内容并赋值给 .selected 元素，浏览器会仅提取纯文本，丢弃所有标签、属性及结构信息。结果就是原本应分别应用不同 CSS 规则的 <span></span> 内容（如价格）失去独立样式，与父文本合并显示为统一格式，甚至出现重复或错位。
根本原因在于：
-
innerText返回的是渲染后的纯文本内容，不包含任何 HTML 标签； -
innerHTML则完整返回节点内的原始 HTML 字符串，包括标签、属性和嵌套关系。
✅ 正确做法是直接使用 option.innerHTML 赋值：
options.forEach(option => {
option.addEventListener('click', () => {
// ✅ 保留完整 HTML 结构，包括 <span> 及其 class
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 中对 .selected span 的样式声明具有足够特异性（避免被全局规则覆盖）：
立即学习“前端免费学习笔记（深入）”；
.selected {
font-size: 16px;
line-height: 28px;
font-weight: bold;
color: #000; /* 主文本颜色 */
}
.selected span {
color: #C00; /* 独立价格颜色 */
margin-left: 8px;
font-weight: normal; /* 可选：价格字体更轻 */
}⚠️ 注意事项：
-
安全性提醒：若下拉选项内容来自不可信来源（如用户输入或 API 动态注入），直接使用
innerHTML存在 XSS 风险。此时应先进行 HTML 转义或改用textContent+ 手动 DOM 构建（如document.createElement）。本例中选项为静态 HTML，可安全使用。 -
样式继承检查：确保
.menu li span与.selected span的 CSS 规则无冲突，推荐使用开发者工具审查计算样式（Computed Styles）验证实际生效规则。 -
初始状态一致性：
.selected的初始 HTML 必须与.menu li中对应项结构完全一致（如均含<span></span>），否则首次点击可能出现样式跳变。
通过这一改动，下拉菜单不仅能准确显示“Basic Pack Free”等复合内容，还能让 <span></span> 持续受独立样式控制，实现视觉层次清晰、语义明确的交互体验。
