Add class to select2 element

问题:

The documentation is either terrible or I'm missing something. I'm trying to add an error class to a select2 box for form validation. It's just a 1px red border.

I found the containerCssClass method in the documentation, but I'm not sure how to apply it.

I have tried the following with no luck:

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

回答1:

jQuery uses JSON objects to initialize, so I guess this one will as well:\

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

If you want to add/remove a class you can do this after you initialized it

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

The above function gets the DOM node of the main container of select2 e.g.: $("#myBox").select2("container")

Important
You will need to use the container method to get the container since you won't edit the SELECT directly but select2 will generate other HTML to simulate a SELECT which is stylable.

回答2:

For already initialized select2 element I have tried @Niels solution but it resulted in an error: Uncaught TypeError: Cannot read property 'apply' of undefined

Went into the source and this has been working instead:

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

Using select2 v4.0.3 full

回答3:

According to the documentation, containerCssClass is only a constructor property. The best you're probably going to be able to do is reinitialize it when you get an error via:

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

Note from comments: If you get Uncaught Error: No select2/compat/containerCss(…), you need to include the select2.full.js version instead of the basic one

回答4:

use theme option.

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

回答5:

Easiest way:

Create a parent class like

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

when you validate it with jquery or php just add style or css to .select-error class like

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

jQuery example:

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

回答6:

You can use dropdownCssClass opiton

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

文章来源: Add class to select2 element