使用原始 HTML Select2

【问题标题】：Use raw HTML Select2使用原始 HTML Select2
【发布时间】：2015-01-12 18:05:32
【问题描述】：

我需要用 css 格式化一个选择框的内容。当然，这不能用标准选择来完成，所以我尝试实现 Select2 来做到这一点。

我的html的基本格式如下

<select>
    <option>
        <span class="a">first</span>
        <span class="b">second</span>
    </option>
    <option>
        <span class="a">first</span>
        <span class="b">second</span>
    </option>
</select>

不幸的是 select2 从选项中去掉了 html。

另外，我正在使用 AngularJS 来实际填充字段。这可能会有所作为。我尝试过使用 UI-Select 库，但它有太多的错误尚未解决。

【问题讨论】：

我浏览了文档，但没有成功。您能否提供一个链接来说明如何做到这一点？

标签： javascript jquery-select2

【解决方案1】：

<option> 元素不允许有除纯文本节点之外的任何子节点。

见：It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

也就是说，Select2 提供了模板选项，允许您在显示值之前包装或以其他方式更改值。我建议通读文档：

模板：http://select2.github.io/select2/#templating

这是上面链接中的示例：

function format(state) {
    if (!state.id) return state.text; // optgroup
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
$("#e4").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

这里有几个答案可以帮助您将其集成到您的 AngularJS 应用程序中：

Use select2 plugin in AngularJS application

【讨论】：