是否使用selectedIndex值在单独的div中输出所选选项的第一个、第二个和第三个值

Question

我想在单独的div中输出所选选项的第一个、第二个和第三个值。下面的代码输出1div中的所有值，但我需要将它们分开，以便对它们进行样式化/对齐。

知道我该怎么做吗？

我只知道如何输出值，但我可以在任何地方找到关于分别选择和输出值的东西。

谢谢。

function selectedAfternoon(element) {
var text = element.options[element.selectedIndex].value;
document.getElementById("output-selected-option-afternoon").innerHTML = text;
}

<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single" onChange="selectedAfternoon(this);">
<option></option>
<option id="13x19namiddag" value="Namiddag|13x19 cm|€12,50">13x19 cm, €12.50</option>
<option id="20x30namiddag" value="Namiddag|20x30 cm|€22,50">20x30 cm, €22.50</option>
<option id="30x45namiddag" value="Namiddag|30x45 cm|€32,50">30x45 cm, €32.50</option>
<option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>
<div id="output-selected-option-afternoon"></div>

Answer 1

document.getElementById("output-selected-option-afternoon").innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";

由(|(拆分，然后加入</div><div>