如何为下拉选择输出的最后一个价格div添加类名

你可以通过拆分后单独处理最后一个元素的方式给价格div加上类名，同时还能优化重复代码，把两个选择框的处理逻辑合并成一个通用函数，减少冗余。

修改后的JavaScript代码 #

function handleSelectChange(element, outputId) {
    var value = element.options[element.selectedIndex].value;
    // 处理禁用选项的特殊情况
    if (value === "disabled") {
        document.getElementById(outputId).innerHTML = "";
        return;
    }
    var parts = value.split("|");
    var htmlParts = [];
    // 遍历拆分后的每一部分
    parts.forEach((part, index) => {
        if (index === parts.length - 1) {
            // 最后一个元素（价格）添加类名
            htmlParts.push(`<div class="item-price">${part}</div>`);
        } else {
            htmlParts.push(`<div>${part}</div>`);
        }
    });
    // 拼接成完整HTML插入到输出容器
    document.getElementById(outputId).innerHTML = htmlParts.join("");
}

更新HTML中的调用 #

把两个select的onChange事件改成调用通用函数，传入对应的输出容器ID：

<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single" onChange="handleSelectChange(this, 'output-selected-option-afternoon');">
  <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>

<select id="Onderweg" name="Onderweg" data-name="Onderweg" class="js-basic-single" onChange="handleSelectChange(this, 'output-selected-option-commute');">
  <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 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-selections">
<div class="selected-option" id="output-selected-option-afternoon"></div>
<div class="selected-option" id="output-selected-option-commute"></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;
}

.item-price {
    font-weight: bold;
    color: #2c3e50;
    /* 可根据需求添加其他样式 */
}

关键逻辑说明 #

1. 通用函数复用：把原本两个重复的处理函数合并成handleSelectChange，通过参数区分不同的输出容器，避免重复代码。
2. 最后元素处理：遍历拆分后的数组时，判断当前元素是否是最后一个（index === parts.length - 1），如果是则给div加上item-price类名。
3. 异常处理：针对disabled选项的value="disabled"做了特殊处理，避免拆分出错导致页面显示异常。

这样处理后，你就可以通过.item-price类名轻松获取所有价格元素，后续进行价格计算操作了。

内容的提问来源于stack exchange，提问作者user16358489