web-dev-qa-db-ja.com

select2ドロップ要素に特定のクラスを追加する方法は？

私はselect2をcss経由でその一般クラスとIDでカスタマイズしました。

今、私はselect2に提供される特定のクラスをカスタマイズし、CSSで適用しようとしています。

私の問題：発言ごとの選択ではなく、本文に追加されるドロップ（クラスselect2-dropのdiv）どのようにアクセスできますか？

私はすでに試しました：

$(".element").select2({
   minimumResultsForSearch: -1,
   containerCssClass : "error"
  }
);

しかし、クラスerrorはそのdivに継承されません。

更新：これは、私が話しているグラフィック要素です（オプション領域）：

enter image description here

そして、これは、特定のクラスを追加したい検査対象のコードですので、CSSでそれを試すことができます：

enter image description here

更新： jsfiddle

javascriptjquerycssjquery-select2
18
Abude

dropdownCssClassを使用して、select2-dropにクラスを追加できます。プラグイン全体を読んで、何が起こっているのかを理解します。最後に、私はそのオプションを見つけました。

 $(".jSelectbox").select2({
     containerCssClass: "error",
     dropdownCssClass: "test"
 });

$(".jSelectbox").select2({
  containerCssClass: "error",
  dropdownCssClass: "test"
});
<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/3.5.2/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select class="jSelectbox">
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        <option value="AR">Arkansas</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="CT">Connecticut</option>
                        <option value="DE">Delaware</option>
                        <option value="FL">Florida</option>
                        <option value="GA">Georgia</option>
                        <option value="HI">Hawaii</option>                   
                        <option value="ID">Idaho</option>
                        <option value="IL">Illinois</option>
                        <option value="IN">Indiana</option>
                        <option value="IA">Iowa</option>
                        <option value="KS">Kansas</option>
                        <option value="KY">Kentucky</option>
                        <option value="LA">Louisiana</option>
                        <option value="ME">Maine</option>
                        <option value="MD">Maryland</option>
                        <option value="MA">Massachusetts</option>
                        <option value="MI">Michigan</option>
                        <option value="MN">Minnesota</option>
                        <option value="MS">Mississippi</option>
                        <option value="MO">Missouri</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NH">New Hampshire</option>
                        <option value="NJ">New Jersey</option>
                        <option value="NM">New Mexico</option>
                        <option value="NY">New York</option>
                        <option value="NC" selected="">North Carolina</option>
                        <option value="ND">North Dakota</option>
                        <option value="OH">Ohio</option>
                        <option value="OK">Oklahoma</option>
                        <option value="OR">Oregon</option>
                        <option value="PA">Pennsylvania</option>
                        <option value="RI">Rhode Island</option>
                        <option value="SC">South Carolina</option>
                        <option value="SD">South Dakota</option>
                        <option value="TX">Texas</option>
                        <option value="TN">Tennessee</option>
                        <option value="UT">Utah</option>
                        <option value="VT">Vermont</option>
                        <option value="VA">Virginia</option>
                        <option value="WA">Washington</option>
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option>
                        </select>

Jsfiddle

31
Alex

containerCssClassは、select2.full.js。フルバージョンにはこのオプションがあります

4
arturmoroz

使用しているselect2のバージョンによって異なります。いずれかのバージョンでhtml構造が変更されました。

Fiddle例： https://jsfiddle.net/LpjcqbLu/

選択ボックスに「エラー」クラスを配置しました。

.error + .select2-container, 
.error + .select2-container + .select2-container .select2-dropdown {
    border: 3px solid red !important;
}

以前のバージョンでは、ドロップダウンは選択ボックス（dom内）の近くになかったため、エラークラスを直接適用するにはJavaScriptソリューションを実行する必要がありました。

3
Jennifer Michelle

別の方法で作成することも可能です-_select2_のdata- *を介して-（_select2.full.js_を追加したくない場合）。次のように使用します：

_ var select2 = $(".element").select2({/* Select2 Opts */});
_

OK。 var _select2_をコンソールに（理解のために）プッシュします：

_ console.log($(select2).data('select2'));
_

次のようなものが表示されます。

_e {$element: init(1), id: "select2-....", options: e, listeners: Object, dataAdapter: d…}
 $container: init(1)
 $dropdown: init(1) <-- what you need!
 $element: init(1)
 $results: init(1)
 ....
_

さて、同じ方法で指定されたクラス（-es）を_select2's dropdown_に追加するだけです：

_select2.data('select2').$dropdown.addClass("...");
_

また、$(select2).data('select2')を介して、他のselect2要素（コンテナなど）にアクセスできます。

3
voodoo417