CODEWITHSUNDEEP
jqueryjquery-select2jquery-select2-4
Brett
Brett

Reputation: 20049

Is there a way to know when an option has been selected in Select2?

I'm using the jQuery plugin select2 (V4) and I want to change the border color when an option has been selected -- that would be on this class:

.select2-selection--single

However looking at the class changes et al when an option is selected it doesn't appear there is any solid way of knowing this within CSS; the only thing I really noticed was the addition of a select2-container--below class to the main select2 container, however I don't think using this would be wise as it doesn't appear to be meant for that.

Is there an easy way to achieve this or would I have to add this functionality myself?

Upvotes: 0

Views: 156

Answers (1)

beaver
beaver

Reputation: 17647

You can achieve your goal using both templating and Select2 CSS customization.

For example, to apply a custom style to elements selected in the dropdown:

li[aria-selected="true"] {
  border: 1px solid red !important;
}

Use Dropdown template to format items in dropdown list and Selection template to format elements selected.

Here is a code sample using those techniques: https://jsfiddle.net/beaver71/0573357j/

Upvotes: 1

Related Questions