Выберите 2 варианта с описанием - PullRequest
Новая
       6

Выберите 2 варианта с описанием

0 голосов
/ 21 января 2019

Я использую 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*

Кто-то знает, как я могу это реализовать?

Вот мой полный сценарий: 

<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>
<script type="text/javascript">
  $.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>

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

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Одним из подходов может быть использование disabled параметров ниже каждого доступного параметра.Более того, вы можете настроить стиль этих отключенных опций, используя опцию templateResult плагина select2, как показано в примере ниже: 

$.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>
0 голосов
/ 21 января 2019

Смотрите этот ответ:

Разрыв строки в HTML Выберите опцию?

В итоге браузеры не поддерживают выпадающие опции, разбиваясь на две строки, что, я думаю, именно то, что вам нужно. В качестве утешительного приза, не могли бы вы добавить описание в виде всплывающей подсказки? 

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