맞춤 속성으로 Select2 드롭 다운의 글꼴 색상을 변경할 수 없습니다.

Question

현재 기존 앱에서 Select2를 사용하려고합니다. 이전 드롭 다운을 성공적으로 활성화하고 Select2 드롭 다운으로 바꿀 수 있습니다. 모두 잘 작동합니다. 드롭 다운이 채워지고 관련 기능이 계속 작동합니다. 그러나, 나는 좀 더 진보 된 것을하려고 노력하고있다.

이전 드롭 다운에서 모든 옵션에는 맞춤 속성이 있습니다.

<option onlyslave="True" ...> ...</option> 

이제 onlyslave 속성이 true 인 경우 텍스트 색상을 빨간색으로 지정합니다. 거짓이라면 검은 색이어야합니다. 이미 텍스트를 빨간색으로 설정하는 방법을 알고 있습니다.

.select2-results { 
    color: red; 
} 

분명히 Select2 드롭 다운의 모든 결과가 빨간색으로 바뀝니다. 속성 [onlyslave = "true"]을 추가하면 문제를 해결할 수 있다고 생각했지만 그렇지 않습니다. 다음 스 니펫은 화면 뒤의 '이전'드롭 다운에 False & Truth가있는 옵션이 있음에도 불구하고 아무 것도 빨간색으로 변하지 않습니다. 자본 '진리'또는 '진리'는 여기서 아무런 차이가 없습니다.

.select2-results[onlyslave="true"] { 
    color: red; 
} 

아무도 내가 이것을 성취 할 수있는 방법을 알고 있습니까? Select2 문서가 조금 부족한 것을 알았습니다. 현재 Select2 4.0.5를 사용하고 있지만 다운 그레이드 할 수 있습니다.

Answer 1

, 당신은 예를 들어, 계정에 onlyslave 특성을 고려하여 요소를 구축하기 위해 templateResult 속성을 사용합니다

HTML

<select> 
    <option onlyslave="True">Option 1</option> 
    <option onlyslave="False">Option 2</option> 
    <option onlyslave="False">Option 3</option> 
</select> 

CSS

.select2-results span[onlyslave="True"] { 
    color: red; 
} 

자바 스크립트

function formatState (state) { 
    if(!state.element) return; 
    var os = $(state.element).attr('onlyslave'); 
    return $('<span onlyslave="' + os + '">' + state.text + '</span>'); 
} 

$(document).ready(function() { 
    $('select').select2({ 
     templateResult: formatState 
    }); 
}); 

Codepen 예 : https://codepen.io/anon/pen/gXByeK

Answer 2

여기에 working fiddle이 있습니다. 앞서 언급 한 대답과 같이 select2의 templateResult 기능을 사용해야합니다. Select2는 원래의 선택 창을 숨기고 사용자 정의 버전을 표시하여 작동합니다. 이 사용자 지정 버전에는 원래 select의 onlyslave 특성이 없으므로 CSS 선택기에서 대상을 선택할 수 없습니다. 나는 내 댓글에서 언급 한 바와 같이

HTML

<select class="js-example-basic-single" name="state"> 
    <option onlyslave="True">test</option> 
    <option>test 2</option> 
</select> 

자바 스크립트

function formatState (state) { 
    if (!state.id) { 
    return state.text; 
    } 

    var $state 
    if(state.element.attributes.onlyslave && state.element.attributes.onlyslave.value == "True"){ 
    $state = $('<span class="redtext">'+ state.text+ '</span>'); 
    } 

else { 
    $state = $('<span>'+ state.text+ '</span>'); 
} 
    return $state; 
}; 


$('.js-example-basic-single').select2({ 
    templateResult: formatState 
});