Как правильно выровнять часть текста в <option>в <select>

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 знает, что вы используете HTML в опциях templateResult и templateSelection.
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>