How to add a specific class to select2 drop element?

Question

I have select2 customized via css with its general classes and ids.

Now, I'm trying to customize a specific class that will be provided to select2 and then apply in css to it.

My issue: is NOT the select per say but the drop of it ( the div with the class select2-drop ) that is appended to the body, how can i access that one?

I've already tried:

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

but the class error is not inherited to that div.

UPDATE: This is the graphic element i'm talking about ( the options area ):

And this is the code in the inspected where i want to add that specific class, so i can play with it in CSS:

UPDATE: jsfiddle

July

Please, provide a demo. – Oaten

@alirezasafian I don't know what demo you would like for such a question, i want a class that will be provided in the select2 or in the select tag to be provided in the select2-dropdown so i can change in CSS colors and stuff but only to that class. – July

You can use jsfiddle for making a demo. It makes easier to solve your problem fast. – Oaten

@alirezasafian jsfiddle.net/wcu23e7m/1 – July

@alirezasafian beacuse i have multiple styles for multiple use. – July

Answer 1

You can use dropdownCssClass for adding class to the select2-drop. I read whole plugin to understand what is going on. Finally, I found that option.

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

Update: If it didn't work, try this (way 2):

$select = $(".jSelectbox").select2({});
$select.data('select2').$container.addClass('error');
$select.data('select2').$dropdown.addClass('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

Oaten

@Jimmy Is that fix your problem? – Oaten

This is exactly what i wanted :) it took a while to get this answer ... thanks for the help! – July

@Jimmy You are welcome. By the way, you could use this selector .error + .select2-drop . Good luck. – Oaten

Note that with select2 4.0.x you need select2.full.js which includes the modules for containerCssClass / dropdownCssClass. – Alvinia

Answer 2

containerCssClass works if you include select2.full.js. Full version has this option

Viviparous

None of the solutions are working ???? i changed my select2 to select2 full still no use – Storiette

Select2 official site has not mentioned this options. – Whitmer

Answer 3

It's possible to make it in another way - via data-* of select2 - (if don't want to add select2.full.js). Use like it:

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

Ok. Now push var select2 to console ( for understanding) like:

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

You will see something like this:

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, now just add specified class(-es) to select2's dropdown in the same way:

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

Also, via $(select2).data('select2') you have access to others select2 elements (container, etc.).

Eudocia

This approach works but it only works per-select. So you need to each(function() {} through your selects and then call select2.data('select2').$dropdown.addClass("...");. – Flowerage

Answer 4

It will depend on the version of select2 that you are using. The html structure changed in one of the versions.

Here is Fiddle example: https://jsfiddle.net/LpjcqbLu/

I just put the 'error' class on the select box.

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

In earlier versions, the dropdown was not close to the select box (in the dom), so you would have to do a javascript solution to apply the error class directly.

Martelli

i need a solution to 3.5.4 version even if it's possible only with JS – July

Then I recommend you put a link to that version in a Fiddle, because not everybody will have a copy. – Martelli

Answer 5

this is Easiest way to add class

$(".kt_select2").on('select2:open', function (e) {
    $('body').find('span.select2-dropdown--below').addClass('kt_select_pro');
    $('body').find('ul.select2-results__options').addClass('kt_select_pro');
});

Tammietammuz

Answer 6

Using

$(".select").select2({
dropdownCssClass: "my-class-dropdown"
});

is the best way of solving this problem, and being able to reference the dropdown by class. Usually, you need to be using select2.full.min.js instead of select2.min.js. However, for those not looking to transition from select2.min.js to select2.full.min.js, I have attached a slightly modified version of select2.min.js v4.0.13 (current stable release as of June 22 2022) of select2.min.js, with fully functional dropdownCssClass. This should save people the hassle of switching to select2.full.min.js over this minor issue.

Also, consider using ":all:". This will give the dropdown all classes which are in the original select element

$(".select").select2({
dropdownCssClass: ":all:"
});

Crosstie

Answer 7

$(".select").select2({
  selectionCssClass: "my-class-section",
  dropdownCssClass: "my-class-drop"
});

Wilen