保留jquery select2下拉项中的选项类

Question

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

我正在尝试建立一个动态列表，基于用户从另一个下拉列表中选择的值，所以如果用户选择了'group1'，那么我希望只显示类为'group-1'的项目。我希望能够执行类似$('ul.select2li.group-2').hide()的操作。

编辑：我把这个问题分成两个,

1. 如何在select2列表中保留选项元素类？-我在下面为对此感兴趣的人提供一个答案。
2. 如何根据选项类动态筛选select2列表？我打开了一个新的问题线程，在其中我将回答这个问题，因为解决方案完全不同。

Answer 1

我通过使用select2插件的模板功能解决了这个问题,

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

注意：这不允许您操作select2下拉列表，因为class属性只会转移到项的内部自定义元素，而不会转移到下拉select2列表的实际

元素。但是，进一步设置下拉列表的样式将变得非常有用，例如，

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

其结果是,