web-dev-qa-db-ja.com

クラスをselect2要素に追加します

ドキュメントがひどいか、何かが欠けています。フォームの検証のために、エラークラスをselect2ボックスに追加しようとしています。それは1pxの赤い境界線です。

ドキュメントでcontainerCssClassメソッドを見つけましたが、適用方法がわかりません。

私は運のない次を試しました：

$("#myBox").select2().containerCssClass('error');
jqueryjquery-select2
22
Deac Karns

jQueryはJSONオブジェクトを使用して初期化するため、これも同様に推測します。\

_$("#myBox").select2({ containerCssClass : "error" });
_

クラスを追加/削除したい場合は、初期化した後にこれを行うことができます

_$($("#myBox").select2("container")).addClass("error");
$($("#myBox").select2("container")).removeClass("error");
_

上記の関数は、select2のメインコンテナーのDOMノードを取得します。例：$("#myBox").select2("container")

重要
SELECTを直接編集することはありませんが、select2はスタイリング可能なSELECTをシミュレートするために他のHTMLを生成するため、containerメソッドを使用してコンテナを取得する必要があります。

28
Niels

すでに初期化されたselect2要素について、@ Nielsソリューションを試しましたが、エラーが発生しました：Uncaught TypeError: Cannot read property 'apply' of undefined

ソースに行って、これは代わりに機能しています：

$($('#myBox').data('select2').$container).addClass('error')
$($('#myBox').data('select2').$container).removeClass('error')

Select2 v4.0.3 fullを使用する

22
Jared

ドキュメント によれば、containerCssClassはコンストラクタープロパティにすぎません。おそらくできることは、エラーが発生したときに再初期化することです。

$("#myBox").select2({
    containerCssClass: "error" 
});

コメントからのメモ：Uncaught Error：No select2/compat/containerCss（…）を取得した場合、代わりにselect2.full.jsバージョンを含める必要があります基本的なものの

11
Samsquanch

ここからグーグルをさまよう人にとって、プロパティcontainerCssClassは、実際にはコンテナ要素にクラスを追加するのではなく、選択要素に追加するため、紛らわしい名前を持っています。これは、生成されたhtmlを調べるときに確認できます。

私はニースの小さなハックに遭遇しました here これにより、CSSクラスをthemeプロパティに追加することでコンテナーに適用できます。

$('#my-select').select2({
    theme: "bootstrap myCssClass",
});
6
Shahin Dohan

テーマオプションを使用します。

 $(".select").select2({
        placeholder: "",
        allowClear: false,
        theme: "custom-option-select"
    });
5
steve joe

最も簡単な方法：

次のような親クラスを作成します

<div class="select-error">
    <select id="select2" name="select2" data-required class="form-control">
        <option value="" selected>No selected</option>
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
</div>

jqueryまたはphpでそれを検証するときは、次のように.select-errorクラスにスタイルまたはcssを追加するだけです

style="border:1px solid red; border-radius: 4px"

jQueryの例：

$('[data-required]').each(function() {
  if (!$(this).val()) {
    if ($(this).data('select2')) {
      $('.select-error').css({
        'border': '1px solid red',
        'border-radius': '4px'
      });
    }
  });
1
trisztan

DropdownCssClass opitonを使用できます

$("#myBox").select2({
    containerCssClass: "error" 
});
0
ycscholes