求助：Select2下拉菜单未继承原始选项样式类的问题

当然可以实现。Select2初始化时会重新生成一套独立的DOM结构替代原生下拉菜单，所以原option的class不会自动传递到新结构上，得通过Select2提供的模板渲染钩子手动处理。

具体实现步骤 #

1. 修改Select2初始化逻辑
   使用templateResult选项自定义下拉项的渲染过程，把原option的class提取出来，添加到Select2生成的元素上：

$('#cities2').select2({
  templateResult: function(option) {
    // 跳过无值的占位符选项（如果存在）
    if (!option.id) {
      return option.text;
    }
    // 创建承载文本的span元素
    var $optionEl = $('<span></span>').text(option.text);
    // 把原option的class转移到新元素上
    if ($(option.element).attr('class')) {
      $optionEl.addClass($(option.element).attr('class'));
    }
    return $optionEl;
  }
});

2. 调整CSS选择器
   因为Select2的下拉项有自己的层级结构，需要修改CSS选择器确保高亮样式能生效：

/* 原生下拉菜单的高亮样式 */
.highlight {
  background-color: #FFCCCB;
}
/* Select2下拉项的高亮样式 */
.select2-results__option .highlight {
  background-color: #FFCCCB;
}
/* 选中状态下的高亮保持（可选） */
.select2-results__option--selected.highlight {
  background-color: #FFCCCB;
}

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>

<style>
.highlight {
  background-color: #FFCCCB;
}
.select2-results__option .highlight {
  background-color: #FFCCCB;
}
.select2-results__option--selected.highlight {
  background-color: #FFCCCB;
}
</style>

<select id="cities1">
  <option value="1">New York</option>
  <option value="2">Los Angeles</option>
  <option value="3" class="highlight">San Diego</option>
  <option value="4">Miami</option>
  <option value="5" class="highlight">Cambridge</option>
</select>

<select id="cities2">
  <option value="1">New York</option>
  <option value="2">Los Angeles</option>
  <option value="3" class="highlight">San Diego</option>
  <option value="4">Miami</option>
  <option value="5" class="highlight">Cambridge</option>
</select>

<script>
$('#cities2').select2({
  templateResult: function(option) {
    if (!option.id) {
      return option.text;
    }
    var $optionEl = $('<span></span>').text(option.text);
    if ($(option.element).attr('class')) {
      $optionEl.addClass($(option.element).attr('class'));
    }
    return $optionEl;
  }
});
</script>

这样处理后，Select2下拉项就能继承原option的highlight类，和原生下拉菜单保持一致的高亮效果。

内容的提问来源于stack exchange，提问作者Kumar Jalli