我可以在选择元素的选项中使用 HTML 标签吗？ [复制]答案

【问题标题】：Can I use HTML tags in the options for select elements? [duplicate]我可以在选择元素的选项中使用 HTML 标签吗？ [复制]
【发布时间】：2012-06-29 13:40:24
【问题描述】：

HTML 选择元素的选项是否可以包含 HTML 标记？

例如，给定以下代码：

 <select>
    <option value="one"><b>one is bold</b></option>
    <option value="two">two has some <span style='color:red;'>red</span> text</option>
    <option value="three">three is just normal</option>
 </select>

我希望这些选项实际呈现在 HTML 中。在这个应用程序中，我可以使用 HTML、CSS、JavaScript（包括 jQuery）。 HTML 本身是通过 Django (django.form.fields.select) 呈现的。

【问题讨论】：

No..html无效...求IE大问题
哇，我认为这是可能的，但没有！要做到这一点，我想你需要使用一些 JavaScript 来模拟（或转换，以便当 JS 不存在时选择仍然存在）一个选择框，而不是一个选择框。我相信你能找到已经做出这种东西的人。
@charlietfl—回复big problems from IE。如？当给出无效的 HTML 时，为什么要挑出 IE 行为不端？它只是忽略选项元素中的 b 标记。
@RobG 只选择了 IE，因为它不支持选项标记或 display:none 上的事件，并且绝对比其他具有无效 html 的浏览器更敏感——当然是 ajax。在这种情况下 - 老实说，我没有尝试它并认为它会导致问题，但我确信标签中允许的仅文本节点......您是否测试回 IE6&7？
如果你想要完全控制并且真的需要你的标记是一个

标签： javascript jquery html css

【解决方案1】：

不，你不能这样做。 <option> 标签不能包含任何其他标签。

【讨论】：

至少在 Chrome 中，
@SamKauffman 这是非法标记。仅仅因为 Chrome 会试图蒙混过关并不意味着“
实际上我试图阻止这种行为，这是一种潜在的注入攻击向量。结果证明只需要简单的服务器端 HTML 转义。之前我很困惑，因为我没有意识到 Chrome 在 Elements 视图中显示的内容是在替换 HTML 实体之后。

【解决方案2】：

不，但是这个：Styling HTML Select 可以帮助你，这里有很多细节和投票：

How to style a <select> dropdown with CSS only without JavaScript?

【讨论】：

链接到另一个作为重复关闭且没有有意义答案的问题并不是特别有用。
这样试试。 < =

【解决方案3】：

不，你不能。

如果你想要这样做，你会做的是使用浮动 div 和位置之类的东西，并使用 Css 将其显示为看起来像一个选择。然后使用javascipt点击让用户选择。

类似这样的：Reinventing the dropdown

【讨论】：

请注意，重新发明下拉菜单是一个非常非常糟糕的主意。 select 非常简单，并且具有大量的语义含义。将 DOM 元素与 JavaScript 拼凑到视觉上近似于相同的东西将是非常不可访问的。
同意。选择框提供的键盘可访问性造就了良好的 UI。但这正是问题发布者试图达到的目标。
未找到附加字段
这样试试。 < =

【解决方案4】：

选项标签不允许除文本以外的任何子项

这是我几个月前创建的一个小提琴，它用下拉列表替换选择元素，并更新每个选择的选择。只需使用 css 隐藏选择 http://jsfiddle.net/6zcRk/

该线程中的用户随后将其转换为 github 上可用的插件（参见线程中的链接）

Custom drop-down panel with jQuery

【讨论】：