title: Is there a way to add a description to each option in a dropdown using select2?
body: <p>I have a Django project in which I have a select dropdown like this:</p>
  
  <p><a href="https://i.stack.imgur.com/l3oz6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l3oz6.png" alt="enter image description here"></a></p>
  
  <p>But I want something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Er5Fc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Er5Fc.png" alt="enter image description here"></a></p>
  
  <p>My <code>&lt;select&gt;</code> form looks like so: (after inspecting in developer tools)</p>
  
  <pre><code>&lt;select class="form-control" data-parsley-required="true" id="id_org_role" name="org_role" required=""&gt;
      &lt;option value="A"&gt;Administrator&lt;/option&gt;
      &lt;option value="M" selected="selected"&gt;Member&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>If not select2, is there any other jquery library that can help me accomplish this?</p>
  
  <p>I have tried following the Select2's documentation, and believe that if
  <a href="https://select2.github.io/examples.html#templating" rel="noreferrer">this</a> 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:</p>
  
  <pre><code>var org_role = function(roles){
        if (!roles.id) {
        return roles.text;
      }
      return $(
      '&lt;strong&gt;' + roles.text + '&lt;/strong&gt;' + '&lt;br/&gt;'
      '&lt;span&gt;' + "some description" + '&lt;/span&gt;'
    );
  };
  
  $("#id_org_role").select2({
    templateResult: org_role,
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>My Django form inside the template looks like this:</p>
  
  <pre><code>&lt;form method="POST" action="" class="org-member-edit" id='organization_permissions' data-parsley-validate&gt;
  
  {% csrf_token %}
  
  &lt;div class="form-group member-role{% if org_role_form.org_role.errors %} has-error{% endif %}"&gt;
  
      &lt;label class="control-label" for="{{ org_role_form.org_role.id_for_label }}"&gt;{% trans "Role" %}&lt;/label&gt;
  
  {% render_field org_role_form.org_role class+="form-control" data-parsley-required="true" %}
  
      &lt;div class="error-block"&gt;{{ org_role_form.org_role.errors }}&lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>in the 5th line above, i.e the <code>render_field org_role_form.org_role</code> in the template tag, the <code>org_role</code> takes up values from the following form:
  (note : <code>render_field</code> because I am using Django-tweaks-wideget)</p>
  
  <pre><code>class EditOrganizationMemberForm(SuperUserCheck, forms.Form):
  
  org_role = forms.ChoiceField(choices=ADMIN_CHOICES)
  </code></pre>
  
  <p>which takes choice fields from another file choices.py like so:</p>
  
  <pre><code>ADMIN_CHOICES = (
           ('A', _('Administrator')),
           ('M', _('Member'))
          )
  </code></pre>
  
  <p>How can I achieve this? (different descriptions for different options) Please help. I have been stuck at this since hours.</p>