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

【问题标题】：Using <strike> or <del> in a select box在选择框中使用 <strike> 或 <del>
【发布时间】：2011-10-05 10:48:02
【问题描述】：

有没有在下拉列表中删除文本。我正在制作一个商务应用程序并寻找一种方法来证明某件商品正在打折。我想通过显示旧价格和删除它并在其旁边显示销售价格来做到这一点。

我试过这样的

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

【问题讨论】：

指定您正在使用的确切 DTD（HTML、XHTML、严格、过渡）

标签： html xhtml

【解决方案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̶

【讨论】：

短一点："19.99".replace(/\d/g, "$&\u0336")
@travis 啊，太好了！ :D 我从来没有在 JavaScript 中使用过$&！
是的，它可以派上用场。另外，您不需要使用嵌套函数。这里还有一些其他的可能会很方便：developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

【解决方案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 来演示。

【讨论】：

【解决方案3】：

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

【讨论】：