Is there a way to add a description to each option in a dropdown using select2?

Question

I have a Django project in which I have a select dropdown like this:

But I want something like this:

My <select> form looks like so: (after inspecting in developer tools)

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

If not select2, is there any other jquery library that can help me accomplish this?

I have tried following the Select2's documentation, and believe that if this way (for templates), we can span an image beside the option's text, then, there must be a way to span a "text description" too under each option. But I dont know how this can be achieved. All I have tried to do untill now is this:

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,
});

But this is not working. Also, even if it does, it would display the same description for all the options. But it has to be different obviously.

My Django form inside the template looks like this:

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

in the 5th line above, ie the render_field org_role_form.org_role in the template tag, the org_role takes up values from the following form: (note : render_field because I am using Django-tweaks-wideget)

class EditOrganizationMemberForm(SuperUserCheck, forms.Form):

org_role = forms.ChoiceField(choices=ADMIN_CHOICES)

which takes choice fields from another file choices.py like so:

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

How can I achieve this? (different descriptions for different options) Please help. I have been stuck at this since hours.

Answer 1

What about putting the description in an attribute eg title?

 $(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/select2@4.0.13/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>