0

オプションの例のドロップダウン選択リストで、2 番目の価格値を取り消し線で引く必要があります: (32 $14.05 $100.00 )。2番目の価格でスパンに別のクラスを追加しようとしていますが、オプションを選択するとスパンが削除されるためです。誰もがそれを成し遂げる方法を助けることができます..?

<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 STROKE 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 に答える