有没有一种方法可以使用select2在下拉菜单中的每个选项中添加说明? [英] Is there a way to add a description to each option in a dropdown using select2?

问题描述

我有一个Django项目，其中有一个如下所示的选择下拉列表:

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

但是我想要这样的东西:

But I want something like this:

我的<select>表单如下所示:(在开发人员工具中检查后)

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>

如果没有select2，是否还有其他jquery库可以帮助我完成此任务?

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

我尝试遵循Select2的文档，并相信如果 此方式(对于模板)，我们可以在选项文本旁边显示图像，然后，在每个选项下都必须也有一种方法来跨越文本描述".但是我不知道该如何实现.直到现在，我一直想做的就是:

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.

模板中的Django表单如下:

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>

上面第五行中的

，即模板标记中的render_field org_role_form.org_role，org_role接受以下形式的值: (注意:render_field，因为我使用的是Django-tweaks-wideget)

in the 5th line above, i.e 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)

从另一个文件choices.py中获取选择字段，如下所示:

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.

推荐答案

如何将说明放入属性中，例如头衔?

What about putting the description in an attribute e.g. 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>

这篇关于有没有一种方法可以使用select2在下拉菜单中的每个选项中添加说明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！