Select2 options with description

Question

I am using the jQuery Select2 plugin for select boxes. Now, I want to add a description to each option. When I open the select box I see the following text:

One
Two
Three
Four

But instead, I want to see something like:

One
*Description for option One*
Two
*Description for option Two*
Three
*Description for option Three*
Four
*Description for option Four*

Does someone know how this can be approach?

Here is my full script:

$.fn.select2.defaults = $.extend($.fn.select2.defaults,
{
    allowClear: true,
    closeOnSelect: true,
    placeholder: 'Select...',
    minimumResultsForSearch: 15
});

$(document).ready(function()
{
    var configParamsObj = {
        placeholder: '',
        minimumResultsForSearch: 3
    };

    $("#vat").select2(configParamsObj);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="vat" name="vat">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Answer 1

One approach could be using disabled options below every available option. Even more, you can customize the style of those disabled options using the templateResult option of the select2 plugin, like shown on the below example:

$.fn.select2.defaults = $.extend($.fn.select2.defaults,
{
    allowClear: true,
    closeOnSelect: true,
    placeholder: 'Select...',
    minimumResultsForSearch: 15
});

$(document).ready(function()
{
    var configParamsObj = {
        placeholder: '',
        minimumResultsForSearch: 3,
        templateResult: function(data, container)
        {
            // Read and propagate the class attribute of elements.

            if (data.element)
                $(container).addClass($(data.element).attr("class"));

            return data.text;
        }
    };

    $("#vat").select2(configParamsObj);
});

.opt-desc
{
    font-size: 11px;
    color: skyblue !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="vat" name="vat" style="width:50%">
  <option value="1">One</option>
  <option class="opt-desc" disabled>Description of option One</option>
  <option value="2">Two</option>
  <option class="opt-desc" disabled>Description of option Two</option>
  <option value="3">Three</option>
  <option class="opt-desc" disabled>Description of option Three</option>
  <option value="4">Four</option>
  <option class="opt-desc" disabled>Description of option Four</option>
</select>