javascript - 使用原始 HTML Select2

Question

我需要用 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 库，但它有太多错误尚未解决。

Answer 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