在Django-widget-tweaks表单中动态添加对每个下拉选项的描述

Question

我有这个表单选择下拉列表，使用Django-tweak＆＃39; s render_field呈现。 在我的模板中，我有这样的形式：

<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会从以下格式中获取值：

class EditOrganizationMemberForm(SuperUserCheck, forms.Form):

    org_role = forms.ChoiceField(choices=ADMIN_CHOICES)

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

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

所以下拉列表如下：

我希望它看起来像这样：

当我检查元素（浏览器中的开发工具）时，我可以看到这个选择选项会像这样呈现：

所以，我尝试使用jQuery尝试解决方案：

$('#id_org_role option').each( function(){
  if ($(this).val() == 'M') {
    $(this).text().append("<br/> description here");
  }
  else if ($(this).val() == 'A'){
    $(this).text().append("<br/> description here");
  }
});

但它没有帮助。但是，如果我这样做：

$('#id_org_role option').each( function(){
  if ($(this).val() == 'M') {
    alert($(this).val());
  }
});

它有效，并生成一个有价值的警报＆＃39; M＆＃39;这意味着代码在if statement之前和之后运行相关，但是为了附加文本，它不起作用。

我真的被卡住了。请帮忙。

Answer 1

所以，这是我如何使用jory-select2解决整个问题，正如Rory在评论中所建议的那样：

首先，在模板中包含所有必需的select2文件：

{% block extra_head %}
<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" />
{% endblock %}

{% block extra_script %}
<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>

然后在上面的JavaScript块中，在包含的最后一个文件下，添加以下jQuery来定义宽度并为每个选项添加title属性，如下所示：

$(document).ready(function(){

  $('select').each(function(){
    $(this).css('width','250px');
  }); //give a width to each dropdown.

  $('select option').each(function(){
    if($(this).val() === 'M'){
      $(this).attr('title','Members can view all the public projects in the organization. Additional permissions are assigned on a project level.');
    }
    else if ($(this).val() === 'A') {
      $(this).attr('title','Administrators have full access to all organizational details and projects.');
    }
    else if ($(this).val() === 'Pb') {
      $(this).attr('title','Members can view all public project data.');
    }
    else if ($(this).val() === 'PU') {
      $(this).attr('title','Members can view both public and private project data.');
    }
    else if ($(this).val() === 'DC') {
      $(this).attr('title','Members can access all project data and upload any field data.');
    }
    else if ($(this).val() === 'PM') {
      $(this).attr('title','Members can edit all project data.');
    }
  }); // add title attributes for each dropdown option.

然后包含Select2代码，为上面的jQuery代码添加每个选项的描述，如下所示：

function formatOption (option) {
  var $option = $(
    '<div><strong>' + option.text + '</strong></div><div>' + option.title + '</div>' 
// takes each option's title, and makes it appear as description just below it.
  );
  return $option;
};

$("select").select2({
  templateResult: formatOption,
  minimumResultsForSearch: -1 // hides the default select2 search bar
});

然后关闭extra_script块标记：

{% endblock %}

就是这样。