Question

我需要在选项示例的下拉列表选择列表中输出第二个价格值：（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>

Answer 1

不可能删除或以其他方式格式化option元素的一部分，因为元素内不允许使用任何标记。这不仅仅是一个理论规则：浏览器实际上忽略了您尝试在那里使用的任何标记。

您可以将HTML标记注入option内容，但这只适用于某些浏览器 - 似乎是Firefox（并且可能被认为是不适用的东西，并且会被修复）。

您可以使用特殊字符，例如U + 0336结合长时间中风，以及

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

只要用于option元素的字体（可能在某些浏览器中修复）包含（s）U + 0336，

就可以工作。结果在视觉上相当糟糕，但您可以使用

等字体设置来解决这个问题

select { font-family: Arial Unicode MS, Verdana }

在旧浏览器上，这可能会以这种或那种方式失败，所以我真的建议采用不同的方法：

用一组单选按钮替换select元素。然后你可以轻松写

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

这样的一套当然不会是一个下拉菜单，但是下拉菜单被大大高估了。此外，如果你真的必须使用一些额外的代码，你可以把它变成一个下拉列表。

在选择选项中删除少量文本

1 个答案: