Javascript 删除选择选项中的少量文本

我需要删除选项下拉列表中的第二个价格值示例：（32$14.05$100.00）。 我试图在第二个价格的跨度中添加一些不同的类，但因为选择选项会删除跨度。有谁能帮我完成这件事吗

<select data-theme="d" class="_variantOption" name="products[0].code">
    <option selected="selected">Select Size</option>
    <c:forEach var="option" items="${variant.variantOptions}" varStatus="st">
        <c:set var="disabled" value="${option.stockLevel < 1}" />
        <option value="${option.code}" ${(disabled) ? 'disabled="disabled"' : ''}>${option.qualifierValue}
            <format:markdownPrice priceData="${option.priceData}" markdownPriceData="${option.markdownPriceData}" />
        </option>
    </c:forEach>
</select>

选择大小
${option.qualifierValue}

由于元素内部不允许标记，因此无法删除

选项

元素的一部分或以其他方式设置其格式。这不仅仅是一条理论规则：浏览器实际上会忽略您试图在那里使用的任何标记

你可以在

选项

内容中插入HTML标记，但这只适用于某些浏览器——Firefox，看起来（可能被视为不应该工作的东西，并且会被修复）

你可以玩特殊的角色，比如U+0336组合长笔划叠加，和

<option>$14.05 $&#x336;1&#x336;0&#x336;0&#x336;.&#x336;0&#x336;0&#x336;

在旧浏览器上，这可能会以某种方式失败，因此我建议采用另一种方法：

用一组单选按钮替换

select

元素。那你就可以很容易地写了

<input type=radio ...><label ...>$14.05 <s>$100.00</s></label>

$14.05$100.00

---

当然，这样的一组数据不会下降，但下降值被高估了。此外，如果确实需要，您可以将其转换为带有一些额外代码的下拉列表。

在此处发布相关代码。。（如果你不想让我们从头开始）。选择大小${option.qualifierValue}我正在附加代码，值是动态的。代码内部：${markdownPriceData.formattedValue}${priceData.formattedValue}${priceData.formattedValue}您不能在选项标记中添加html标记。看看这个。依我看，如果需要，请尝试使用

ul

和

li

标签创建您自己的下拉列表。您不能在

选项中使用元素，请检查：
<input type=radio ...><label ...>$14.05 <s>$100.00</s></label>