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

Question

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

例如，这里：

<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 上，你应该使用类似的东西：

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

这是一个有效的 fiddle ：http://jsfiddle.net/wphqwvLf/55/

Answer 2

您实际上是自己编写选项还是通过 ajax 获取选项？因为我认为你自己写的是这里的问题。如果您通过 ajax 检索数据，您可以使用格式化功能并且它工作正常。示例：

function formatAdresses (email) {
    var $email = $("<span>"email.NACHNAME + "</span><span class='pull-right'>" + email.EMAIL + "</span>");
    return $email;
};

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

select2.js - How to align two items inside option element

javascript

jquery

jquery-select2