logo标签列表

我能否在选择元素的选项中使用HTML标签？

javascriptjqueryhtmlcss
71

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）进行渲染的。

无效的HTML会给IE带来大问题。 - charlietfl
哇，我以为这是可能的，但不是！要做到这一点，我想你需要使用一些JavaScript来模拟（或转换，使得当JS不存在时仍然存在选择框）一个选择框，而实际上并不是一个选择框。我相信你可以找到已经制作了这样东西的人。 - Greg Pettit
1
@charlietfl - 从IE中出现了一些大问题。比如？为什么在给出无效的HTML时要单独选择IE表现不良呢？它只是忽略了选项元素中的* b *标记。 - RobG
@RobG 只是单独提到IE，因为它不支持在选项标签上的事件或display:none，并且与其他浏览器相比，对无效的HTML更加敏感 - 尤其是在使用ajax时。在这种情况下 - 我老实说没有尝试过，并且假设它会引起问题，但我确定标记中只允许文本节点...你测试过IE6和7吗？ - charlietfl
如果您想要完全控制并且确实需要您的标记为<select>，请使用JavaScript小部件，例如jQuery UI的selectMenu。或者，寻找一个可以处理<ul>列表或JavaScript数据的JavaScript小部件，例如JQWidgets jqxDropDownList。 - spekary
尝试这样做。<option value="< style='color:rgb(0, 0, 0);background-color:rgb(255, 235, 0);border-radius:10px;padding-left:8px;padding-right:8px;'>想说的话</b> "></html>想写的话</html></option> < = < / > = > - JamesHeo
4个回答
100
不行，你不能这样做。 <option> 标签不能包含任何其他标签。
4
至少在Chrome浏览器中，<option>标签可以包含<script>标签。它们会像普通的<script>标签一样运行，也就是说它们不可见，但是它们会被执行。目前这让我感到有些焦虑。 - Sam Kauffman
3
@SamKauffman 这是非法的标记。仅仅因为Chrome会尝试混淆它，并不意味着"<option>标签可以包含<script>标签"。你不能依赖这种行为。 - user229044
3
实际上，我试图防止该行为，因为它是潜在的注入攻击向量。事实证明，只需要简单的服务器端HTML转义即可解决问题。之前我感到困惑，是因为我没有意识到Chrome在Elements视图中显示的内容是在替换HTML实体后的结果。 - Sam Kauffman
6
1
将另一个已被关闭为重复项且没有有意义答案的问题链接并不特别有帮助。 - Richard Smith
尝试这样做：<option value="< style='color:rgb(0, 0, 0);background-color:rgb(255, 235, 0);border-radius:10px;padding-left:8px;padding-right:8px;'>想说的话</b> "></html>想写的话</html></option> < = < / > = > - JamesHeo
4
不行，你不能这样做。如果你想要这个效果，可以使用类似浮动的div，并使用CSS来定位和显示它，使其看起来像一个下拉框，然后使用JavaScript点击允许用户进行选择。
类似这种方法：重新定义下拉菜单。
3
请注意，重新发明下拉框是一个非常糟糕的想法。选择框非常简单，并且具有大量的语义意义。用JavaScript将DOM元素拼凑在一起，以视觉上近似相同的效果会导致无法大规模访问。 - user229044
1
同意。选择框提供的键盘可访问性使得UI更好。但这就是问题发布者试图实现的内容。 - nunespascal
1
找不到附加的字段。 - Arnold Vakaria
尝试这样做：<option value="< style='color:rgb(0, 0, 0);background-color:rgb(255, 235, 0);border-radius:10px;padding-left:8px;padding-right:8px;'>想说的话</b> "></html>想写的话</html></option> < = < / > = > - JamesHeo
1

option标签不允许包含除文本以外的任何子元素

这是我几个月前创建的一个fiddle，它用列表下拉框替换了select元素，并在每次选择后更新了select。只需使用CSS隐藏select即可 http://jsfiddle.net/6zcRk/

这个帖子中的用户将其转化为可在github上使用的插件（请参见帖子中的链接）

使用jQuery自定义下拉面板

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接