select2にクラスを追加するにはどうすればいいですか？

Question

私はselect2 selectboxにクラスpinkを追加したいと思います。それはボックスでオプションを使用して動作しますが、ない：

$("select").select2({ 
 
    templateResult: function (data, container) { 
 
    if (data.element) { 
 
     $(container).addClass($(data.element).attr("class")); 
 
    } 
 
    return data.text; 
 
    } 
 
});

.yellow { background-color: yellow; } 
 
.blue { background-color: blue } 
 
.green { background-color: green } 
 
.pink { background-color: pink }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script> 
 

 
<select class="select2 pink"> 
 
    <option value="AL" class="yellow">Alabama</option> 
 
    <option value="AK" class="blue">Alaska</option> 
 
    <option value="AZ" class="green" selected>Arizona</option> 
 
</select> 
 

 

 
<select class="select2"> 
 
    <option value="Something else" >Something else</option> 
 
    <option value="Something else" >Something else</option> 
 
    <option value="Something else">Something else</option> 
 
</select>

私が必要とする結果：

Answer 1

を使用すると、すべてのオプションの背景色になりたい場合はピンクの場合は、select2.cssファイルから標準色を削除する必要があります。 JQコード説明.select2-container

の元クラスは.select2-container

にクラスのピンクを追加

1. 店舗：あなたは

   .select2-container--default .select2-selection--single { background:none}

   EDITを使用していることを行うことができますon change機能では、電子前回保存されたクラス（changeMeClass）

2. optClass変数

3. で選択したオプションクラスを取得し、選択されたオプション

4. に対応するselect2-containerを使用してコンテナから

5. をすべてのクラスを削除見つけますsetTimeout関数、コンテナにクラスを追加する（元のクラス+選択したオプションクラス）

あなたは

探していたものを、これはそれが機能しなかった理由は、私が間違ってSELECT2のバージョンを使用し、ある

$("select").select2({ 
 
    templateResult: function(data, container) { 
 
    if (data.element) { 
 
     $(container).addClass($(data.element).attr("class")); 
 
    } 
 

 
    return data.text; 
 
    } 
 
}); 
 
var changeMeClass = $(".pink + .select2-container").attr("class") 
 
$(".pink + .select2-container").addClass("pink") 
 

 

 
$(".pink").on("change changeMeClass", function() { 
 
    var optClass = $(this).children("option:selected").attr("class"), 
 
    changeMe = $(this).next(".select2-container") 
 

 
    $(changeMe).removeClass() 
 

 
    setTimeout(function() { 
 
    $(changeMe).attr("class", changeMeClass + " " + optClass) 
 
    }, 10); 
 

 

 

 

 

 
})

.yellow { background-color: yellow; } 
 
.blue { background-color: blue } 
 
.green { background-color: green } 
 
.pink { background-color: pink } 
 
.select2-container--default .select2-selection--single { background:none!important}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script> 
 

 
<select class="select2 pink"> 
 
    <option value="AL" class="yellow">Alabama</option> 
 
    <option value="AK" class="blue">Alaska</option> 
 
    <option value="AZ" class="green" selected>Arizona</option> 
 
</select> 
 

 

 
<select class="select2"> 
 
    <option value="Something else" >Something else</option> 
 
    <option value="Something else" >Something else</option> 
 
    <option value="Something else">Something else</option> 
 
</select>

Answer 2

下のスニペットを見れば私に知らせて。

それは統合することが重要である：select2.full.js

$(".mybox").select2({ 
 
containerCssClass: "pink", 
 
    templateResult: function (data, container) { 
 
    if (data.element) { 
 
     $(container).addClass($(data.element).attr("class")); 
 
    } 
 
    return data.text; 
 
    } 
 
});

.yellow { background-color: yellow; } 
 
.blue { background-color: blue } 
 
.green { background-color: green } 
 
.pink { background-color: pink!important }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.full.js"></script> 
 

 
<select class="select2 mybox"> 
 
    <option value="AL" class="yellow">Alabama</option> 
 
    <option value="AK" class="blue">Alaska</option> 
 
    <option value="AZ" class="green" selected>Arizona</option> 
 
</select>