select2를 사용하여 드롭 다운의 각 옵션에 설명을 추가 할 수 있습니까?

Question

나는이 같은 선택 드롭 다운이있는 장고 프로젝트가 :

을하지만 난 이런 걸 원하는 :

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

그러나 이것은 작동하지 않습니다. 또한, 그렇게해도 모든 옵션에 대해 동일한 설명을 표시합니다. 그러나 분명히 달라야합니다. 템플릿 태그의 render_field org_role_form.org_role에서, org_role는 다음과 같은 형식의 값을 차지 즉, 위의 5 번째 줄에

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

:

템플릿 내부

내 장고 양식은 다음과 같습니다 (참고 : render_field

: 그래서 같은 다른 파일 choices.py에서 선택 필드 소요-wideget 장고 - 비틀기를)

class EditOrganizationMemberForm(SuperUserCheck, forms.Form): 

org_role = forms.ChoiceField(choices=ADMIN_CHOICES) 

사용하고 있기 때문에

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

어떻게하면됩니까? (다른 옵션에 대한 다른 설명) 도와주세요. 나는이 시간 동안이 일에 매달 렸습니다.

Answer 1

속성에 설명을 넣으면 어떨까요? 예 : 표제? 솔루션에 대한

$(function(){ 
 
    $("select").select2({ 
 
    templateResult: formatOption 
 
    }); 
 
    
 
    function formatOption (option) { 
 
    var $option = $(
 
     '<div><strong>' + option.text + '</strong></div><div>' + option.title + '</div>' 
 
    ); 
 
    return $option; 
 
    }; 
 
});

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

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

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

 
<br/><br/><br/> 
 
<div></div>