在选择框中使用<strike>或<del>

Question

无论如何都要在下拉列表中删除文本.我正在制作商务应用程序并寻找一种方式来证明某件商品正在销售中.我想通过显示旧价格并将其显示出来并显示其旁边的销售价格来做到这一点.

我试过这样的事

<select>
    <option value="1">Small Box 10.99</option>
    <option value="2">Large Box <del>19.99</del> 15.99</option>
</select>

Answer 1

您可以使用Unicode组合字符U + 0336 LONG STROKE OVERLAY:

"19.99".replace(/\d/g, function (digit) { return digit + "\u0336" })

结果: 1̶9̶.9̶9̶

(当你将它应用到这个时期时看起来不那么好;这就是我把它留下来的原因.)

以下是应用笔划的所有数字,如果您只想将它​​们复制到服务器端脚本中:

0?1?2?3?4?5?6?7?8?9?

Answer 2

如果您使用的是标准HTML,则无法进行此操作select.标记中的任何标记都<option>将被忽略:

<!-- The style in the span tag is completely ignored -->
<option value="1"><span syle="color:red">Small</span> Box 10.99</option>

您最接近select使用HTML获得所需功能的方法是使用"禁用"属性.例:

<select>
    <option />
    <option value="1" disabled="disabled">Small Box 10.99 (Original Price)</option>
    <option value="1">Small Box 6.99 (Sale Price)</option>
</select>

这是一个工作小提琴演示.