34

ドキュメンテーションがひどいか、何か不足しています。フォーム検証のために select2 ボックスにエラー クラスを追加しようとしています。1px の赤枠です。

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

私は運がないので次のことを試しました：

$("#myBox").select2().containerCssClass('error');
4

8 に答える 8

40

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 メソッドを使用してコンテナーを取得する必要があります。

于 2013-02-22T16:43:14.790 に答える
32

すでに初期化されている 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 フルの使用

于 2016-09-07T13:51:32.303 に答える
21

ドキュメントによると、はcontainerCssClassコンストラクタ プロパティのみです。おそらくできる最善の方法は、次の方法でエラーが発生したときに再初期化することです。

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

コメントからのメモ: を取得した場合は、基本バージョンの代わりにselect2.full.jsUncaught Error: No select2/compat/containerCss(…)バージョンを含める必要があります。

于 2013-02-22T16:54:34.370 に答える
2

最も簡単な方法:

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

<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で検証するときは、スタイルまたはcssを.select-errorクラスに追加するだけです

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'
      });
    }
  });
于 2016-08-28T21:59:01.160 に答える
0

dropdownCssClass オプションを使用できます

$("#myBox").select2({
    containerCssClass: "error" 
});
于 2016-07-28T04:10:27.143 に答える