Question

这是当前外观：我期望这样：码：还需要对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>

快速说明：

templateSelection是呈现列表的方式。
templateResult是选择选项的显示方式（尝试选择一个选项，您将看到其工作原理）
escapeMarkup是让select2知道您在templateResult和templateSelection选项中正在使用HTML。
应用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>

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

2 个答案: