web-dev-qa-db-ja.com

v4.0でselect2要素にクラスを追加する方法

これは、 select2要素にクラスを追加する の方法に関するこの質問に非常に似ていますが、そこにある回答は、v4.0でいくつかの重大な変更を受けたフレームワークの以前のバージョンを対象としています

これによると、 select2-containerに追加のカスタムクラスを追加する問題 により、select [2]コンストラクターに渡すことができるドキュメント化されていないプロパティがいくつかありました。たとえば、containerCss、containerCssClass 、dropdownCss、およびdropdownCssClass。

ただし、バージョン4で次のコードを実行すると：

$('.select2').select2({
    containerCss: "wrap"
});

次のエラーが表示されます。

不明なエラー：select2/compat/containerCssがありません

V4.0でクラスをSelect2に渡すにはどうすればよいですか？

StackSnippetsの例を次に示します。

$('.select2').select2({
    containerCss: "wrap"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/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.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>
javascriptjqueryjquery-select2
22
KyleMit

Select2は、元のselect要素で使用するすべての情報を保存します。元の要素で.data('select2')を呼び出すことにより、次の情報にアクセスできます。

Select2 Data

そこから、$containerプロパティにアクセスしてDOM内のコンテナを識別し、次のようにクラスを追加できます。

var $select2 = $('select.select2').select2()

$select2.data('select2').$container.addClass("wrap")

スタックスニペットのデモはこちら

var $select2 = $('select.select2').select2()
$select2.data('select2').$container.addClass("wrap")
body .select2.narrow {
    width: 200px;
}
body .wrap .select2-selection--single {
    height: 100%;
}
body .select2-container.wrap .select2-selection--single .select2-selection__rendered {
    Word-wrap: break-Word;
    text-overflow: inherit;
    white-space: normal;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/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.0/js/select2.full.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Really long name that normally</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>
32
Nulle

次のオプションを使用して、クラスをcontainer（selection）またはdropdown（options）：

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

4.0アナウンスメントの移行ガイド ：によると

Select2のfull buildを使用する場合（select2.full.js）互換性モジュールが使用されます場合によっては、コードが期待どおりに動作することを確認します。

Configuration Docs に従って、次のオプションを渡すことができます。

Configuration Docs

ただし、Select2は、 "コンテナ"が何であるか、およびそれがどこにあると予想されるかを定義することには適していません。

高レベルのHTML構造の一部の内訳と、カスタムクラスが表示される場所を次に示します。

Select2 Container vs Dropdown

カスタムクラスをコンテナおよびドロップダウンラッパーに出力し、それらを使用して各セクションの色をスタイルする（挿入されていることを証明するためだけに）実行中のデモを次に示します。

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});
select {
  width: 200px;
}

.custom-container span {
  color: blue!important;
}
.custom-dropdown {
  color: red;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/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.0/js/select2.full.js"></script>

<select class="select2">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>
12
KyleMit

クラスを追加する方法を見つけました。同じ方法で道を見つけることができず、自分でそれを作ったので、ここにあります：

$('.select2').on('click',function(){
  var matchBlock = $(this).prev();
  if(matchBlock.hasClass('select-control-left')){
    $('.select2-dropdown').addClass('blue-select');
  }
  else{
     $('.select2-dropdown').addClass('orange-select');
  }
});
2
Anton Pogonii

Select2にReactラッパーを使用しているため、現在の回答はどれも機能しませんでした。しかし、クラスを追加できなくても、クラスをベース要素に追加してから、 隣接するCSSセレクター を使用します。

$('.select2').select2();
.wrap + .select2-container .select2-selection--single {
    border: solid 1px #F00;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/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.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>
1
Chase Sandmann

すべての要素にクラスを追加する場合の簡単な答えを次に示します。

$.fn.select2.defaults.set('containerCssClass', 'wrap');
0
slob