Question

我想要一个HTML选择，但我不想使用纯文本，而是想使用Bootstrap的标签。我怎么能做到这一点？

像这样。

<select class="form-control">
  <option><span class="label label-primary">Primary</span></option>
  <option><span class="label label-info">Info</span></option>
  <option><span class="label label-warning">Warning</span></option>
</select>

http://plnkr.co/edit/ng3GzXee6K8ELWYt2mDH?p=preview

Answer 1

我建议使用像Select2（http://ivaynberg.github.io/select2/#templating）这样具有一些模板功能的库。

由于Select2，您可以在data代码上使用一些option属性并显示格式化的select样式元素。

但正如@dragoste所提到的，在option代码中使用任何HTML代码都无效。

代码将是这样的：

<select class="form-control">
  <option data-label-class="label-primary">Primary</span></option>
  <option data-label-class="label-info">Info</span></option>
  <option data-label-class="label-warning">Warning</span></option>
</select>

JS代码如下：

function format(option) {
    var originalOption = option.element;

    return '<span class="label ' + $(originalOption).data('label-class') + '">' + option.text;
}

$("#select-example").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

HTML <select> with bootstrap Labels </select>

1 个答案: