如何在 <select> 中的 <option> 中右对齐文本的某些部分

Question

这是目前的样子：

我期待这个：

代码：

   <select class="form-control">
        <option value="1123x1">S\J [1123]</option>
        <option value="562x1">Rib / Int. [562]</option>
        <option value="1123x3">Fleece [1123]</option>
    </select>

还需要 select2 的建议。

Answer 1

这是实现这一目标的一种方法：

使用select2的配置选项：templateResult、templateSelection和escapeMarkup，可以根据需要操作下拉列表。

我在这里使用示例数据：

$('#example').select2({
		data: [
    	{id: 'test1', text: 'January', subText: "Test1"},
      {id: 'test2', text: 'February', subText: "Test2"},
    	{id: 'test3', text: 'March', subText: "Test3"}      
    ],
    placeholder: 'Select a month',
    escapeMarkup: function (markup) {
    	return markup;
    },
    templateResult: function (d) {
    	return '<span>'+d.text+'</span><span class="pull-right subtext">'+d.subText+'</span>';
    },
    templateSelection: function (d) {
    	return d.text + ' ( ' + d.subText + ')';
    }
}).val('test2').trigger('change');

.pull-right {
  float: right!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

<select id="example" multiple="multiple" style="width: 300px"></select>

快速解释：

1. templateSelection 是列表的呈现方式。
2. templateResult 是选择选项的显示方式（尝试选择一个选项，您会看到它是如何工作的）
3. escapeMarkup，简而言之，就是让 select2 知道您在 templateResult 和 templateSelection 选项中使用 HTML。
4. 应用pull-right（对应CSS：float: right;将潜台词右移。

您可以根据需要操作选项。我只是想展示它是如何完成的。希望这会有所帮助。

Answer 2

一定有更好的解决方案。这是我试图解决你的问题

 <select class="form-control">
        <option value="1123x1">S\J &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
        <option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
        <option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
    </select>