以下是实现这一功能的JavaScript代码：

function selectedAfternoon(element) {
    // 1. 获取选中选项的完整 value 字符串
    var text = element.options[element.selectedIndex].value;

    // 检查是否选择了有效选项，避免处理空值或禁用选项
    if (text && text !== "disabled") {
        // 2. 将字符串按 '|' 分隔符拆分成数组
        // 例如 "Namiddag|13x19 cm|€12,50" 会变成 ["Namiddag", "13x19 cm", "€12,50"]
        var parts = text.split("|");

        // 3. 将数组中的每个部分用 "" 连接起来
        // 例如 ["Namiddag", "13x19 cm", "€12,50"] 会变成 "Namiddag13x19 cm€12,50"
        var joinedParts = parts.join("");

        // 4. 将拼接好的字符串包裹在最外层的  中，并更新目标元素的 innerHTML
        // 最终结果为 Namiddag13x19 cm€12,50
        document.getElementById("output-selected-option-afternoon").innerHTML = "" + joinedParts + "";
    } else {
        // 如果未选择有效选项，则清空显示区域
        document.getElementById("output-selected-option-afternoon").innerHTML = "";
    }
}

完整示例代码

将HTML结构和JavaScript代码结合，形成一个可运行的完整示例：

    
    
    
    



    
选择下午时段选项

    
      请选择
      13x19 cm, €12.50
      20x30 cm, €22.50
      30x45 cm, €32.50
      更多尺寸或数量请在购物车中注明
    

    

    

注意事项与扩展

• 空值和禁用选项处理: 在 selectedAfternoon 函数中，我们添加了对 text 是否为空或为 "disabled" 的判断。这有助于避免在用户未选择任何有效选项时，页面上出现不必要的空 或错误信息。
• 分隔符的灵活性: String.prototype.split() 方法可以接受任何字符串作为分隔符。如果你的数据使用逗号、分号或其他字符分隔，只需相应地修改 split(",") 或 split(";") 即可。
• CSS 样式化: 由于每个数据部分现在都位于独立的 元素中，你可以利用CSS选择器（如 nth-child、first-child、last-child，或者为每个部分添加特定的类）对它们进行独立的样式化。例如，你可以设置不同的背景色、字体大小、对齐方式或边框，以增强视觉效果和信息区分度。
• 语义化: 如果这些数据部分有特定的含义，考虑使用更具语义的HTML标签（如 、

  、 等）来替换 ，或者为 添加 role 属性和 ARIA 标签以增强可访问性，特别是在需要辅助技术支持的场景。

• 数据验证: 在实际应用中，你可能还需要对 split() 后的数组长度进行验证，确保所有期望的部分都存在。这可以防止因数据格式不一致（例如，某个选项的 value 缺少某个部分）导致页面显示异常。

总结

通过巧妙地结合 String.prototype.split() 和 Array.prototype.join() 方法，我们可以高效地解析并展示下拉菜单选项中包含的多部分数据。这种方法不仅简单易懂，而且极大地增强了前端页面对复杂数据展示的灵活性和可控性，使得开发者能够为每个数据片段应用独立的样式和布局，从而提升用户体验和界面的专业度。