Есть ли способ добавить описание к каждому параметру в раскрывающемся списке с помощью select2?

У меня есть проект Django, в котором у меня есть раскрывающийся список выбора, например:

введите здесь описание изображения

Но я хочу что-то вроде этого:

введите здесь описание изображения

Моя форма <select> выглядит так: (после проверки в инструментах разработчика)

<select class="form-control" data-parsley-required="true" id="id_org_role" name="org_role" required="">
    <option value="A">Administrator</option>
    <option value="M" selected="selected">Member</option>
</select>

Если не select2, есть ли другая библиотека jquery, которая может помочь мне в этом?

Я пытался следовать документации Select2 и считаю, что если этим способом (для шаблонов) , мы можем расположить изображение рядом с текстом параметра, тогда должен быть способ также разместить «текстовое описание» под каждым параметром. Но я не знаю, как этого можно добиться. Все, что я пытался сделать до сих пор, это:

var org_role = function(roles){
      if (!roles.id) {
      return roles.text;
    }
    return $(
    '<strong>' + roles.text + '</strong>' + '<br/>'
    '<span>' + "some description" + '</span>'
  );
};

$("#id_org_role").select2({
  templateResult: org_role,
});

Но это не работает. Кроме того, даже если это так, оно будет отображать одно и то же описание для всех параметров. Но очевидно, что он должен быть другим.

Моя форма Django внутри шаблона выглядит так:

<form method="POST" action="" class="org-member-edit" id='organization_permissions' data-parsley-validate>

{% csrf_token %}

<div class="form-group member-role{% if org_role_form.org_role.errors %} has-error{% endif %}">

    <label class="control-label" for="{{ org_role_form.org_role.id_for_label }}">{% trans "Role" %}</label>

{% render_field org_role_form.org_role class+="form-control" data-parsley-required="true" %}

    <div class="error-block">{{ org_role_form.org_role.errors }}</div>

  </div>

</form>

в 5-й строке выше, то есть render_field org_role_form.org_role в теге шаблона, org_role принимает значения из следующей формы: (примечание: render_field, потому что я использую Django-tweaks-wideget)

class EditOrganizationMemberForm(SuperUserCheck, forms.Form):

org_role = forms.ChoiceField(choices=ADMIN_CHOICES)

который берет поля выбора из другого файла selections.py следующим образом:

ADMIN_CHOICES = (
         ('A', _('Administrator')),
         ('M', _('Member'))
        )

Как я могу этого добиться? (разные описания для разных вариантов) Пожалуйста, помогите. Я застрял в этом с часов.


person Yoshita Arora    schedule 31.03.2017    source источник


Ответы (1)


Как насчет помещения описания в атрибут, например. заглавие?

$(function(){
  $("select").select2({
    templateResult: formatOption
  });
  
  function formatOption (option) {
    var $option = $(
      '<div><strong>' + option.text + '</strong></div><div>' + option.title + '</div>'
    );
    return $option;
  };
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<select style="width:200px">
  <option value="optionA" title="Description for A">option A</option>
  <option value="optionB" title="Description for B">option B</option>
</select>

person noriMonsta    schedule 31.03.2017
comment
Спасибо за решение. Это сработало отлично. Хотя для добавления атрибута title я использовал jquery для динамического добавления атрибутов для каждого соответствующего параметра, но основную/первоначальную идею я получил из вашего ответа. Огромное спасибо за помощь. Ваше здоровье! @нориМонста - person Yoshita Arora; 02.04.2017
comment
Красивый, простой и прямой ответ. На многие посты по этой теме и не очень четкие ответы как у вас. А+ - person lzoesch; 23.03.2020
comment
Отличный ответ +1. Есть ли способ удалить атрибут title после отображения шаблона? - person Allan Jebaraj; 01.10.2020