web-dev-qa-db-fra.com

Comment ajouter une classe spécifique à l'élément drop select2?

J'ai select2 personnalisé via css avec ses classes générales et ses identifiants.

Maintenant, j'essaie de personnaliser une classe spécifique qui sera fournie à select2, puis de l'appliquer en CSS.

Mon problème: ce n'est PAS le select per say mais la goutte de celui-ci (le div avec la classe select2-drop ) qui est annexé au corps, comment puis-je y accéder?

J'ai déjà essayé:

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

mais la classe error n'est pas héritée de cette div.

MISE À JOUR: Voici l'élément graphique dont je parle (la zone d'options):

enter image description here

Et voici le code dans l'inspecteur où je veux ajouter cette classe spécifique, donc je peux jouer avec en CSS:

enter image description here

MISE À JOUR: jsfiddle

javascriptjquerycssjquery-select2
18
Abude

Vous pouvez utiliser dropdownCssClass pour ajouter une classe au select2-drop. J'ai lu le plugin entier pour comprendre ce qui se passe. Enfin, j'ai trouvé cette option.

 $(".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 fonctionne si vous incluez select2.full.js. La version complète a cette option

4
arturmoroz

Cela dépendra de la version de select2 que vous utilisez. La structure html a changé dans l'une des versions.

Voici Fiddle exemple: https://jsfiddle.net/LpjcqbLu/

Je viens de mettre la classe "erreur" sur la case de sélection.

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

Dans les versions antérieures, la liste déroulante n'était pas proche de la zone de sélection (dans le dom), vous devez donc faire une solution javascript pour appliquer directement la classe d'erreur.

3
Jennifer Michelle

Il est possible de le faire d'une autre manière - via data- * de select2 - (si vous ne voulez pas ajouter select2.full.js). Utilisez comme ça:

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

D'accord. Maintenant, poussez var select2 Sur la console (pour comprendre) comme:

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

Vous verrez quelque chose comme ceci:

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)
 ....

Ok, maintenant ajoutez simplement la classe spécifiée (-es) à select2's dropdown De la même manière:

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

De plus, via $(select2).data('select2') vous avez accès à d'autres éléments select2 (conteneur, etc.).

3
voodoo417