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

这是当前外观：



我期望这样：



码：

   <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的建议。

最佳答案

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

使用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;将子文本移到右侧。


您可以根据需要操作选项。我只是想展示如何做到这一点。希望这可以帮助。