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" data-price="500">Вариант 1</option>
  <option value="Вариант 2" data-price="1000">Вариант 2</option>
  <option value="Вариант 3" data-price="">Вариант 3</option>
</select>

JavaScript

$(document).ready(function() {
    $('.js-select2').select2({
      minimumResultsForSearch: Infinity,
      language: "ru",
      templateResult: formatState, //показывает цену когда выбрал в результате
      templateSelection: formatState, //показывает цену при выборе в option
    });
    
    //функция для подгрузки цены из data-price в option
    function formatState(object) {
      var $el = $(object.element),
        name = $el.text(),
        price = $el.attr('data-price');

      //return '' + name + '' + ' - <b>' + price + '</b> руб';
      return $('<span>' + name + ' - <strong>' + price + '</strong> руб</span>');
    };
  });