Celect как в options сделать часть текста жирным?

Поставил celect2, пытался как-то задействовать в option, теги b, strong но так нельзя, их просто не видно, какие теги можно использовать внутри option?

Хотел реализовать так, выделить цену
<select name="cel" id="cel" class="js-select2">
<option value="Вариант 1">Вариант 1 - <b>500</b> руб</option>
<option value="Вариант 2">Вариант 2 - <b>1000</b> руб</option>
</select>


Еще пробовал для селекта скрипт, который из атрибута берет цену и вставляет в конце текста и можно сделать жирным.
<script>
$('#cel').select2({
formatResult: function(object) {
var $el = $(object.element),
name = $el.text(),
price = $el.attr('data-price');
return '<b>' + name + '</b>' + '<b>' + price + '</b>';
}
});
</script>


и селект для этого скрипта

<select name="cel" id="cel" class="js-select2">
<option value="Вариант 1" data-price="500">Вариант 1</option>
<option value="Вариант 2" data-price="1000">Вариант 2</option>
</select>


Попробовал применить на более свежие версии селект2, не работает, видимо как-то вызывать по другому надо.
jsfiddle.net/vlit/8mw4tf6y/16

А вот на старой версии, такой скрипт срабатывает, там нет $('.js-select2').select2({
jsfiddle.net/vlit/8mw4tf6y/6

Если вариантов нет чтобы применить какой-то тег в option, то такой скрипт вполне подходит, но как его применить для более новых версий celect2, вот тут jsfiddle.net/vlit/8mw4tf6y/16
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
ws17
@ws17 Автор вопроса
Нашел решение.
Надо было добавить: escapeMarkup: function(markup) { return markup; },

jsfiddle.net/vlit/8mw4tf6y/102

Ловите еще вариант без escapeMarkup: function(markup) { return markup; },
jsfiddle.net/vlit/3qvzg41m/2

И если кому надо доработка, если в друг нет цены и выводиться (руб) ну или еще чего, то тут с проверкой, чтоб не выводить доп это слово.
jsfiddle.net/vlit/8bsmc0wj

А если кому надо сделать чтоб для определенного селекта срабатывало, то вот вариант, бывает не один селект на странице.
jsfiddle.net/vlit/42o916u0/2
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы