Select2에서 소스 클래스의 속성 (예 : CSS 클래스)을 유지하는 방법은 무엇입니까?

Question

Select2에 원본 소스의 모든 CSS 클래스가 선택 및 결과 드롭 다운 렌더링에 포함되도록하고 싶습니다.

This solution은 templateResult 옵션을 사용하며 결과 드롭 다운에 사용할 수 있습니다. 는 next answer에 제안 내가 templateSelection에 대한 동일한 코드를 사용할 때 작동하는을 보이지만, 문제가있는 것입니다 : 선택을 변경하는 경우

function copyClassesToSelect2(data, container) { 
 
    if (data.element) { 
 
     $(container).addClass($(data.element).attr("class")); 
 
    } 
 
    return data.text; 
 
} 
 

 
(function ($) { 
 
    "use strict"; 
 
    $(function() { 
 
     $("#my-select").select2({ 
 
      allowClear: true, 
 
      minimumResultsForSearch: Infinity, 
 
      templateResult: copyClassesToSelect2, 
 
      templateSelection: copyClassesToSelect2 
 
     }); 
 
    }); 
 
}(jQuery));

.one {background: cyan} 
 
.two {background: yellow} 
 
.three {background: lightgreen}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> 
 

 
<select id="my-select" class="my-select" name="my-select" data-placeholder="--- Please select ---"> 
 
    <option value="">--- Please select ---</option> 
 
    <option value="one" class="one">One</option> 
 
    <option value="two" class="two">Two</option> 
 
    <option value="three" class="three">Three</option> 
 
</select>

이 는, 렌더링 선택 항목이 모두 유지

은 이전에 첨부 된 클래스 따라서 "3"다음에 "1"또는 "2"를 선택하면 이 각각의 색상 대신 녹색으로 유지됩니다. 또한 선택을 지울 때 자리 표시 자의 배경이 녹색입니다.

1. 어떻게 선택한 항목은 원하는 클래스를 만들 수있는 templateSelection 콜백을 수정해야 할 것인가?

2. 거의 설명되지 않은 옵션 adaptContainerCssClass 및 adaptDropdownCssClass은 여기에서 도움이 되겠습니까? 걔들 뭐해?

3. 원본 소스 속성을 모두 Select2에 상속하는 것이 더 좋은 방법입니까? 예 : class="my-select"<select>?

   function copyClassesToSelect2(data, container) { 
       if (data.element) { 
        $.each($(container).attr('class').split(' '), function(index, cssClass) { 
         if(!cssClass.match("^select2-")) { 
          $(container).removeClass(cssClass); 
         } 
        }); 
   
        $(container).addClass($(data.element).attr("class")); 
       } 
       return data.text; 
   } 
   

   : 여기

Answer 1

는 대안이다