Outputting values of select options in specific HTML structure on selection-CodePudding

I want to output the values that become visible when selecting an option in the dropdown into the table structure that is now visible as an example. Edit: The table is just as an example how I want the output to be after selecting an option, I don’t want the table to -always- be visible and insert selections into it. So my guess is that the table structure should be set up after .innerHTML or something and declare the values at the right places into the table?

Any help will be greatly appreciated.

function selectedAfternoon(element) {
  var text = element.options[element.selectedIndex].value;
  document.getElementById("output-selected-option-afternoon").innerHTML = "<div>"   text.split("|").join("</div><div>")   "</div>";
  document.getElementById("output-selected-option-afternoon").querySelector("div:last-child").classList.add("price-selected-option")
}

.selected-option {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

<select id="namiddag" name="Namiddag" data-name="Namiddag"  onChange="selectedAfternoon(this);">
  <option></option>
  <option id="13x19namiddag" value="13x19 cm|1|12,50">13x19 cm, €12.50</option>
  <option id="20x30namiddag" value="20x30 cm|1|22,50">20x30 cm, €22.50</option>
  <option id="30x45namiddag" value="30x45 cm|1|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>


<table>
<thead>
  <tr>
    <th>Format</th>
    <th>Amount</th>
    <th>Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>13x19 cm</td>
    <td>1</td>
    <td >12,50</td>
  </tr>
</tbody>
</table>

function selectedAfternoon(element) {
  var text = element.options[element.selectedIndex].value;
  let tableBody = document.getElementById('selected-option-table-afternoon');

  const [format, amount, price] = text.split("|")

  tableBody.innerHTML = `<tr>
                <td>${format}</td>
                <td>${amount}</td>
                <td>${price}</td>
                </tr>`
}

function selectedCommute(element) {
  var text = element.options[element.selectedIndex].value;
  let tableBody = document.getElementById('selected-option-table-commute');

  const [format, amount, price] = text.split("|")

  tableBody.innerHTML = `<tr>
                <td>${format}</td>
                <td>${amount}</td>
                <td>${price}</td>
                </tr>`
}

<select id="namiddag" name="Namiddag" data-name="Namiddag"  onChange="selectedAfternoon(this);">
  <option></option>
  <option id="13x19namiddag" value="13x19 cm|1|12,50">13x19 cm, €12.50</option>
  <option id="20x30namiddag" value="20x30 cm|1|22,50">20x30 cm, €22.50</option>
  <option id="30x45namiddag" value="30x45 cm|1|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>

<select id="onderweg" name="Onderweg" data-name="Onderweg"  onChange="selectedCommute(this);">
  <option></option>
  <option id="13x19onderweg" value="13x19 cm|1|12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="20x30 cm|1|22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="30x45 cm|1|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" >
  <table>
    <thead>
      <tr>
        <th>Format</th>
        <th>Amount</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody id="selected-option-table-afternoon">
      <tr>
        <td></td>
        <td></td>
        <td ></td>
      </tr>
    </tbody>
  </table>
</div>

<div id="output-selected-option-commute" >
  <table>
    <thead>
      <tr>
        <th>Format</th>
        <th>Amount</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody id="selected-option-table-commute">
      <tr>
        <td></td>
        <td></td>
        <td ></td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

inside your selectedAfternoon function

  function selectedAfternoon(element) {
            var text = element.options[element.selectedIndex].value;
            let tableBody = document.querySelector('tbody');

            const [format, amount, price] = text.split("|")

            tableBody.innerHTML = `<tr>
                <td>${format}</td>
                <td>${amount}</td>
                <td>${price}</td>
                </tr>`
        }