2

我有一个 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)

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

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

我怎样才能做到这一点?(不同选项的不同描述)请帮忙。几个小时以来,我一直坚持这一点。

4

1 回答 1

14

将描述放在属性中怎么样?例如标题?

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

于 2017-03-31T21:03:03.170 回答