CODEWITHSUNDEEP
jqueryjquery-select2
John
John

Reputation: 952

Select2 options with description

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>

Upvotes: 3

Views: 1705

Answers (2)

Shidersz
Shidersz

Reputation: 17190

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>

Upvotes: 2

troyw1636
troyw1636

Reputation: 348

See this answer:

Line Break in HTML Select Option?

The summary is that browsers don't natively support drop down options breaking over two lines, which I think is what you want here. As a consolation prize, could you add the description as a tool tip like this?

<option value="1" title="*Description for option One*">One</option>

Upvotes: 0

Related Questions