在jquery select2下拉菜單項中保留選項類

Question

有誰知道是否有可能將元素類傳遞給jQuery select2下拉菜單項？

<select> 
    <option class="group-1"></option> 
    <option class="group-1"></option> 
    <option class="group-2"></option> 
    <option class="group-2"></option> 
</select> 

我試圖建立一個基於從另一個下拉列表中選擇用戶選擇的值的動態列表，因此，如果用戶選擇「組1」，那麼我想只顯示與類「組1」的項目。我希望能夠做到像$('ul.select2 li.group-2').hide()這樣的事情。

編輯：我分裂了這個問題分爲2爲清楚起見，在我已經開發瞭解決這個問題的答案，

1. 如何在選擇2上市的保留選項元素類？ - 我在下面爲那些對此感興趣的人提供了一個答案。
2. How to dynamically filter a select2 listing based on option class?我打開了一個新的問題線程，我回答這個問題的解決方案很不相同。

Answer 1

我設法通過select2 plugin的模板功能來解決這個問題，

<script type="text/javascript"> 
(function($) { 
    'use strict'; 

    var opportunities = $('select#opportunities').select2({ 
    dropdownParent: $('#select-opportunity'), 
    templateResult: formatItem 
    }); 
    function formatItem (state) { 
    if (!state.id) { return state.text; } 
    var $state = $(
     '<span class="opportunity-item ' + state.element.className + '">' + state.text + '</span>' 
    ); 
    return $state; 
    } 
})(jQuery); 
</script> 

注意：這不會讓你操縱選擇2下拉列表中，因爲類屬性僅轉移到內部自定義<span>我們項目的元素，而不是下拉select2列表的實際<li>元素。然而，它變得進一步風格的下拉列表，例如非常有用，

<style> 
.opportunity-item.group-1::after{ 
    content: ''; 
    display: inline-block; 
    margin-left:5px; 
    width: 10px; 
    height: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background-color: green; 
} 
.opportunity-item.group-2::after{ 
    content: ''; 
    display: inline-block; 
    margin-left:5px; 
    width: 10px; 
    height: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background-color: blue; 
} 
</style> 

導致，