select2将类别添加到所选选项 [英] select2 add class to selected option

问题描述

我想在select2中将类添加到选项，因此，在我单击建议列表项后，它将在主菜单中添加自定义类 add-to-select-multiple 选择结构.

I want to add class to option in select2, so after i click on suggest list item it will add custom class added-to-select-multiple to the main select structure.

下面是示例代码:

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

在我点击建议列表的第一个元素之后:

After i click on first element of suggest list :

_________ 检查的HTML输出 ___________________

_________HTML output from inspect___________________

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

如何实现?我正在尝试:

How to achive that? I was experimenting with :

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

});

但是我还没有找到解决方案，我想我还没有接近.

but i haven't found the solution, i think i wasn't even close.

小提琴: https://jsfiddle.net/Friiz/19rootn5/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>

这篇关于select2将类别添加到所选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！