select2 将类添加到所选选项答案

【问题标题】：select2 add class to selected optionselect2 将类添加到所选选项
【发布时间】：2018-04-06 14:25:14
【问题描述】：

我想将类添加到 select2 中的 option，所以在我单击建议列表项后，它会将自定义类 add-to-select-multiple 添加到主选择结构。

示例代码如下：

<select id="myselect2" multiple="multiple" style="width:50%;">
    <option>One</option>
    <option>Another option</option>
    <option>Hello there</option>
</select>

点击建议列表的第一个元素后：

_________inspect 的 HTML 输出___________________

<select id="myselect2" multiple="" style="width:50%;" data-select2-id="myselect2" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
// result 
  <option data-select2-id="4" class="added-to-select-multiple">One</option>
  <option data-select2-id="5">Another option</option>
  <option data-select2-id="6">Hello there</option>
</select>

如何做到这一点？我正在尝试：

$('#myselect2').trigger({
        type: 'select2:select',

});

但我还没有找到解决方案，我想我什至没有接近。

小提琴：https://jsfiddle.net/Friiz/19rootn5/1/

感谢您的帮助！

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

这可能是一种方法：

$('#myselect2').select2();
    
$('#myselect2').on('change', function(){
    $(this).find('option').removeClass('added-to-multiple-select');
    $(this).find('option:selected').addClass('added-to-multiple-select');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="myselect2" multiple="multiple" style="width:50%;">
  <option>One</option>
  <option>Another option</option>
  <option>Hello there</option>
</select>

【讨论】：