有没有办法使用select2为下拉列表中的每个选项添加描述？

Question

我有一个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的文档，并相信如果 this方式（对于模板），我们可以跨选项文本旁边的图像，然后，必须有一种方法来跨越＆＃34;文本描述＆＃34;每个选项下也是如此。但我不知道如何实现这一目标。我现在所做的一切都是这样的：

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)

从其他文件中选择选择字段choices.py如下：

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

我怎样才能做到这一点？ （不同选项的不同描述）请帮助。我几个小时以来一直坚持这个。

Answer 1

如何将描述放在属性中，例如标题？

＆＃13;

＆＃13;

$(function(){
  $("select").select2({
    templateResult: formatOption
  });
  
  function formatOption (option) {
    var $option = $(
      '<div><strong>' + option.text + '</strong></div><div>' + option.title + '</div>'
    );
    return $option;
  };
});

＆＃13;

<script type="text/javascript" src="https://select2.github.io/vendor/js/jquery.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/dist/js/select2.full.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/prettify.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/anchor.min.js"></script>

<link href="https://select2.github.io/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="https://select2.github.io/dist/css/select2.min.css" type="text/css" rel="stylesheet" />

<link href="https://select2.github.io/css/font-awesome.css" type="text/css" rel="stylesheet" />
<link href="https://select2.github.io/css/s2-docs.css" type="text/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>

<br/><br/><br/>
<div></div>

＆＃13;

＆＃13;

＆＃13;