javascript - select2.js - 如何对齐选项元素内的两个项目

Question

我想对齐<option>内的两个项目使用 select2.js 插件的元素。

例如这里:

<select id="myExample" class="pull-left">
    <option value="1" class="pull-left"><span class="pull-left">Item A </span><span class="pull-right">Company A</span></option>
</select>

我希望项目 A 靠左对齐，公司 A 靠右对齐。

我怎样才能实现这一目标？我尝试仅使用 css 但它似乎不起作用。

<强> jsFiddle

Answer 1

为字符串使用分隔符，在我的示例中，我使用“~”，然后在 select2 转义标记后将其拆分:

$("select").select2({
  escapeMarkup : function(text){
      text = text.split("~");
      return '<span class="pull-left">'+text[0]+'</span><span class="pull-right">'+text[1]+'</span>';
  }
});

在选择时，您应该使用类似以下内容的内容:

<select id="myExample" class="pull-left">
    <option value="1" class="pull-left">
        Item A~Company A
    </option>
</select>

这是一个工作 fiddle :http://jsfiddle.net/wphqwvLf/55/