Использовать необработанный HTML Select2

Question

Мне нужно отформатировать содержимое поля выбора с помощью css. Конечно, это невозможно сделать со стандартным выбором, поэтому я попытался реализовать Select2 для этого.

Основной формат моего HTML выглядит следующим образом

<select> 
    <option> 
     <span class="a">first</span> 
     <span class="b">second</span> 
    </option> 
    <option> 
     <span class="a">first</span> 
     <span class="b">second</span> 
    </option> 
</select> 

К сожалению Выбор2 раздевает HTML из опции.

Кроме того, я использую AngularJS для заполнения полей. Это может иметь значение. Я попытался использовать библиотеку UI-Select, но у нее слишком много ошибок, которые до сих пор не решены.

Answer 1

<option> Элементы не могут иметь детей, отличных от текстовых узлов.

• См: It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

Тем не менее, Выбор2 предоставляет варианты шаблонов, что позволяет обернуть или иным образом изменять значения, прежде чем они будут отображаться. Я предлагаю прочитать через документации:

• Templating: http://select2.github.io/select2/#templating

Вот пример из приведенной выше ссылке:

function format(state) { 
    if (!state.id) return state.text; // optgroup 
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text; 
} 
$("#e4").select2({ 
    formatResult: format, 
    formatSelection: format, 
    escapeMarkup: function(m) { return m; } 
}); 

Вот вопрос с несколькими ответами, которые помогут вам интегрируйте его в свое приложение AngularJS:

• Use select2 plugin in AngularJS application