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库，但它有太多的bug仍未解决。

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

使用原始HTML Select2

1 个答案: