下拉菜单选中项样式异常求助：p与span文本合并样式丢失

问题根源 #

• 用option.innerText获取内容时，会把<li>里的所有文本（包括<span>内的价格）合并成纯字符串，设置给.selected的innerHTML后，原本的<span>结构消失，对应样式自然失效。
• 第二次尝试时，option.innerText已经包含了<span>里的价格内容，再单独追加<span>标签和价格，就导致价格重复显示。

最简单的解决方案 #

直接把选中选项的完整HTML结构复制到.selected元素里——因为每个<li>的结构和.selected的<p>结构完全一致（都是「套餐名 + 价格」），这样既能保留样式，又不会重复：

修改JavaScript中选项点击事件的代码：

options.forEach(option => {
  option.addEventListener('click', () => {
    // 直接复制选项的完整HTML结构
    selected.innerHTML = option.innerHTML;
    // 以下逻辑保持不变
    select.classList.remove('select-clicked');
    caret.classList.remove('caret-rotate');
    menu.classList.remove('menu-open');
    options.forEach(opt => {
      opt.classList.remove('active');
    });
    option.classList.add('active');
  });
});

更灵活的拆分方案（适配结构调整） #

如果后续需要调整页面结构，可以单独提取套餐名和价格标签，彻底避免内容重复：

options.forEach(option => {
  option.addEventListener('click', () => {
    // 获取套餐名（取<li>内第一个文本节点的内容，去除多余空格）
    const planName = option.firstChild.textContent.trim();
    // 获取完整的价格<span>标签（保留原有样式）
    const priceSpan = option.querySelector('span').outerHTML;
    // 拼接成正确的HTML结构
    selected.innerHTML = `${planName} ${priceSpan}`;
    
    // 以下逻辑保持不变
    select.classList.remove('select-clicked');
    caret.classList.remove('caret-rotate');
    menu.classList.remove('menu-open');
    options.forEach(opt => {
      opt.classList.remove('active');
    });
    option.classList.add('active');
  });
});

修改后，选中选项时.selected元素会保留正确的<span>结构，样式正常生效，也不会出现价格重复的问题。

内容的提问来源于stack exchange，提问作者Oleg Losh