jquery - 选择2个带有描述的选项

Question

我正在使用 jQuery Select2 插件来选择框。现在，我想为每个选项添加描述。当我打开选择框时，我看到以下文本:

One
Two
Three
Four

但是，我想看到类似的内容:

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

有人知道这是如何实现的吗？

这是我的完整脚本:

$.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

一种方法是在每个可用选项下面使用disabled选项。更重要的是，您可以使用 select2 插件的 templateResult 选项自定义这些禁用选项的样式，如下例所示:

$.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>