我可以在选择元素的选项中使用 HTML 标签吗？

IT技术 javascript jquery html css
2021-01-22 10:55:48

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) 呈现的。

4个回答

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

@SamKauffman 这是非法标记。仅仅因为 Chrome 会试图混淆视听，并不意味着“<option> 标签可以包含 <script> 标签”。您不能依赖这种行为。
2021-03-21 10:55:48
至少在 Chrome 中，<option> 标签可以包含 <script> 标签。它们的行为就像普通的 <script> 标签，这意味着它们不可见，但它们会执行。这让我现在有些惊慌。
2021-03-23 10:55:48
实际上，我试图阻止这种行为，这是一种潜在的注入攻击向量。结果证明只需要简单的服务器端 HTML 转义。我是因为之前我没有意识到什么，你的Chrome在节目元素的观点是混淆后替换HTML实体。
2021-04-09 10:55:48
链接到另一个作为重复关闭且没有有意义答案的问题并不是特别有帮助。
2021-03-14 10:55:48
像这样试试。<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> < = < / > = >
2021-03-16 10:55:48

你不能。

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

像这样：重新发明下拉菜单

同意。选择框提供的键盘可访问性构成了良好的 UI。但这正是问题发布者试图实现的目标。
2021-03-13 10:55:48
请注意，重新发明下拉菜单是一个非常非常糟糕的主意。select 非常简单，并且具有大量语义。将 DOM 元素与 JavaScript 拼凑在一起以在视觉上近似相同的事物将非常难以访问。
2021-03-17 10:55:48
未找到附加字段
2021-03-17 10:55:48
像这样试试。<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> < = < / > = >
2021-03-27 10:55:48

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

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

此线程中的用户然后将其转换为 github 上可用的插件（请参阅线程中的链接）

使用 jQuery 自定义下拉面板

像这样试试。<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> < = < / > = >
2021-03-22 10:55:48
其它你可能感兴趣的问题
上一篇我的非常简单的 Greasemonkey 脚本没有运行？ 下一篇使用 JavaScript 原型对象时事件方法中的“this”关键字