JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<link rel="stylesheet" href="https://unique-store.vl-it.ru/media/celect2/select2.min.css">
<script src="https://unique-store.vl-it.ru/media/celect2/select2.min.js"></script>
<script src="https://unique-store.vl-it.ru/media/celect2/ru.js"></script>
<select name="cel" id="cel" class="js-select2">
  <option value="Вариант 1">Вариант 1</option>
  <option value="Вариант 2">Вариант 2</option>
  <option value="Вариант 3">Вариант 3</option>
</select>
<br/><br/>
<select name="cel" id="cel100" class="js-select2">
  <option value="Вариант 1" data-price="500">cel100 Вариант 1</option>
  <option value="Вариант 2" data-price="1000">cel100 Вариант 2</option>
  <option value="Вариант 3" data-price="">cel100 Вариант 3</option>
</select>

JavaScript

$(document).ready(function() {
    $('.js-select2').select2({
      minimumResultsForSearch: Infinity,
      language: "ru",
    });
    
    $('#cel100.js-select2').select2({
      minimumResultsForSearch: Infinity,
      escapeMarkup: function(markup) { return markup; },
      language: "ru",
      templateResult: formatStateBold, //показывает цену когда выбрал в результате
      templateSelection: formatStateBold, //показывает цену при выборе в option
    });
    
    //функция для подгрузки цены из data-price в option и делаем цену жирным при выводе
    function formatStateBold(object) {
      var $el = $(object.element),
        name = $el.text(),
        price = $el.attr('data-price');
        if (price) {
        	price = ' - <b>' + price + '</b> руб';
        } else {
        	price = '';
        }

      return '' + name + '' + price;
    };
  });