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

Question

我有一个动态获取值的选择控件。 在脚本中，我需要在选择标签内插入以下文本作为其内部 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 选择控件中的任何其他方式来执行此操作吗？

Answer 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>