包含 HTML 和 JavaScript 标记作为文本的 HTML 选择控件答案

【问题标题】：HTML select control containing HTML and JavaScript tags as text包含 HTML 和 JavaScript 标记作为文本的 HTML 选择控件
【发布时间】：2017-12-22 16:12:36
【问题描述】：

我有一个动态获取值的选择控件。在脚本中，我需要在选择标签内插入以下文本作为其内部 html。

<option value=""></option>
<option><h1>zoot</h1></option>
<option><div>divTest</div></option>
<option><span> style="color:red;font-weight:bold;">SpanTest</span></option>
<option><option>option</optipon></option>

我想要做的是在下面的图片中

我尝试使用 HTMLEncode，但也没有用。我可以使用 JavaScript 或 jQuery 或通过 html 选择控件中的任何其他方式来做到这一点吗？

【问题讨论】：

"我尝试使用 HTMLEncode" 你能把你试过的代码贴出来吗。
请添加您用于制作动态内容的代码
您不应该将 html 放入 <option> 元素中，最好的选择是 CSS 或显示列表
正如@BenKolyaMansley 所说，由于原生select html 元素的各种缺点，有许多插件可以自己实现选择。

标签： javascript jquery html drop-down-menu

【解决方案1】：

您可以使用 jQuery 和 text 函数将项目添加到选择中。

例如

var vals = ["<h1>zoot</h1>",
  "<div>divTest</div>",
  "<span> style='color:red;font-weight:bold;'>SpanTest</span>",
  "",
  "option"
];

var $stuff = $("#stuff");

vals.forEach(function(val) {
  $("<option/>").text(val).appendTo($stuff);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="stuff">
  <option value=""></option>
</select>

【讨论】：

【解决方案2】：

如果您希望 HTML 对用户可见，则需要对其进行编码。下面的工作示例。

<select name="example">
  <option value=""></option>
  <option>&lt;h1&gt;zoot&lt;/h1&gt;</option>
  <option>&lt;div&gt;divTest&lt;/div&gt;</option>
  <option>&lt;span&gt; style="color:red;font-weight:bold;">SpanTest&lt;/span&gt;</option>
  <option>&lt;option&gt;option&lt;/optipon&gt;</option>
 </select>

如果您尝试使用这些 HTML 块显示预览，您可能希望退出 select 列表并提供不同的用户界面来执行此操作 - 例如与无线电输入相结合的预览。

【讨论】：