Javascript 在Django widget tweaks表单中动态向每个下拉选项添加说明

我有这个表单选择下拉列表，使用Django tweak的

render\u字段

进行渲染。 在我的模板中，我有这样的表单：

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

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

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

$('#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");
  }
});

因此，下拉列表如下所示：

我希望它看起来像这样：

当我检查元素（浏览器中的开发工具）时，我可以看到此选择选项呈现如下：

因此，我尝试使用jQuery来尝试解决方案，如下所示：

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

$('#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");
  }
});

它可以工作，并生成一个值为“M”的警报，这意味着代码在

if语句

之前和之后正确运行，但对于追加文本，它不起作用

---

我真的被卡住了。请帮忙

下面是我如何按照Rory在评论中的建议，使用jquery-select2解决整个问题的：

首先，在模板中包含所有必要的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>

然后包括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
});

---

就这些

使用标准的

选项

元素将无法获得这种布局。要执行所需操作，您需要将

select

及其

选项

元素转换为其他可以设置样式的HTML。有一些第三方库已经可以为您做到这一点，比如Select2I实际上是在为开源项目做贡献，这是开源项目的一部分。所以我必须遵循他们的架构。我可以集成一些不同的东西来实现这一点。请指导是否有其他解决方案。感谢@Rorymcrossani刚刚意识到组织本身使用select2，这太完美了。非常感谢你的帮助。我可能会考虑在这里使用它，如果我卡住了，它会还给你的。如果你也能帮我，我会很高兴的。无论如何，谢谢你的建议@RoryMcCrossan@RoryMcCrossan不幸的是，我在任何地方都找不到任何解决方案。我真的被这个问题困扰了好几个小时。“请帮帮我。”罗里姆克罗桑终于解决了这个问题。无论如何，感谢您为select2提供建议。效果很好：）

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
});

{% endblock %}