我有一个 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方式(对于模板),我们可以在选项文本旁边跨越图像,那么,必须有一种方法在每个选项下也跨越“文本描述”。但我不知道如何实现这一点。到目前为止我所尝试做的就是:
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)
它从另一个文件 choice.py 中获取选择字段,如下所示:
ADMIN_CHOICES = (
('A', _('Administrator')),
('M', _('Member'))
)
我怎样才能实现这个目标? (不同的选项有不同的描述)请帮忙。几个小时以来我一直被困在这个问题上。
最佳答案
将描述放入属性中怎么样?标题?
$(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>
关于jquery - 有没有办法使用 select2 为下拉列表中的每个选项添加描述?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43148940/