[英]Is there a way to add a description to each option in a dropdown using select2?
我有一個 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 庫可以幫助我完成此操作?
我曾嘗試選擇二的文檔以下,並認為,如果這種方式(對於模板),我們可以跨越該選項的文本旁邊的圖像,那么,必須有跨越“文字說明”太下,每個選項的方式。 但我不知道這是如何實現的。 直到現在我一直試圖做的是:
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的調整,wideget)
class EditOrganizationMemberForm(SuperUserCheck, forms.Form):
org_role = forms.ChoiceField(choices=ADMIN_CHOICES)
它從另一個文件 options.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.