0

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

1 回答 1

2

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

您可以将 HTML 标记注入到option内容中，但这仅适用于某些浏览器——似乎是 Firefox（并且可能被视为不应该工作的东西，将被修复）。

您可以使用特殊字符，例如 U+0336 COMBINING LONG STROK OVERLAY，以及

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

如果用于option元素的字体（在某些浏览器中可能是固定的）包含 U+0336，则在某种意义上会起作用。结果在视觉上相当糟糕，但是您可以使用字体设置来解决此问题，例如

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

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

select用一组单选按钮替换元素。然后你可以很容易地写

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

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

于 2013-09-19T13:58:07.017 回答