У меня есть требование вычеркнуть второе значение цены в раскрывающемся списке выбора вариантов: (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
, так как внутри элемента не допускаются теги. Это не просто теоретическое правило: браузеры фактически игнорируют любую разметку, которую вы пытаетесь использовать там.
Вы можете вставлять HTML-теги в контент option
, но это будет работать только на некоторых браузерах - Firefox, кажется (и может рассматриваться как нечто, что не должно работать и будет исправлено).
Вы можете играть со специальными символами, такими как U + 0336 COMBINING LONG STROKE OVERLAY, и
<option>$14.05 $̶1̶0̶0̶.̶0̶0̶
будет работать в некотором смысле, при условии, что шрифты (шрифты), используемые для элементов option
(которые могут быть исправлены в некоторых браузерах), содержат (-ы) U + 0336. Результаты визуально довольно плохие, но вы можете исправить это с помощью настроек шрифта, таких как
select { font-family: Arial Unicode MS, Verdana }
В старых браузерах это, вероятно, терпит неудачу так или иначе, поэтому я предлагаю другой подход:
Замените элемент select
на набор переключателей. Тогда вы можете легко написать
<input type=radio ...><label ...>$14.05 <s>$100.00</s></label>
Разумеется, такой набор не будет выпадающим списком, но выпадающие списки сильно переоцениваются. Кроме того, вы можете превратить его в выпадающий список с дополнительным кодом, если вам действительно нужно.