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

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>

使用HTML select，您最接近所需功能的方法是使用“已禁用”属性。例如：

<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>

这是a working fiddle来演示。

Answer 3

没有。使用HTML标准元素，您无法拥有这种功能。要解决这个问题，你必须创建自己的元素。