Give last div from outputted values after selection from dropdown a class-CodePudding

I have values outputted from selected options in dropdowns, which are separated in divs. But I need the last div which contains the price to have a class so that I can calculate the prices later on with Javascript.

I just got great help separating the values in divs after selecting an option because I couldn’t find anything about that online, so this is also something I can’t find anything about because its again about separating the values, but now with an addition to that question.

Thank you.

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

function selectedCommute(element) {
    var text = element.options[element.selectedIndex].value;
    document.getElementById("output-selected-option-commute").innerHTML = "<div>"   text.split("|").join("</div><div>")   "</div>";
}

.js-basic-single {
  width: 100%;
}

.selected-option {
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
  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="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>

<select id="Onderweg" name="Onderweg" data-name="Onderweg"  onChange="selectedCommute(this);">
  <option></option>
  <option id="13x19onderweg" value="Onderweg|13x19 cm|€12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="Onderweg|20x30 cm|€22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="Onderweg|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-selections">
<div  id="output-selected-option-afternoon"></div>
<div  id="output-selected-option-commute"></div>
</div>

CodePudding user response：

You can select the last child element with the css :last-child selector. You can either use this to add the class, or use this as the selector when you calculate the prices later on.

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

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

.js-basic-single {
  width: 100%;
}

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

.price {
  color: red;
}

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

<select id="Onderweg" name="Onderweg" data-name="Onderweg"  onChange="selectedCommute(this);">
  <option></option>
  <option id="13x19onderweg" value="Onderweg|13x19 cm|€12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="Onderweg|20x30 cm|€22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="Onderweg|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-selections">
<div  id="output-selected-option-afternoon"></div>
<div  id="output-selected-option-commute"></div>
</div>