I want to output the first, second and third value of a selected option in separate divs. I have the code below which outputs all values in 1 div, but I need them to be separated so I can style/align them.

Any idea how I can do this?

I only just figured out how I can output the value, but I can find anywhere something about selecting and outputting the values separately.

Thank you.

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"  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  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>

CodePudding user response：

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

Split by (|) then join with </div><div>