Add "OR" text to select 2



I currently have this:

                $('#' +{
                    tags: true,
                   templateSelection: formatOption

 function formatOption (option) {

                if (! {
                    return option.text;

                var $option = $(
                    '<span>' + option.element.value +  ' </span><strong>OR</strong>'
                return $option;


Ideally, I would like the OR to separate the tags, any idea how I can do this?




If screen reader accessibility is not a concern (i.e., the “OR” might not be announced by the screen reader), you could insert the “OR” text as the content of the li.select2-selection__choice::before element. You just need to reserve space in the left margin for the generated text, and you need to exclude the first selection. The following CSS does the trick:

.select2-container--default li.select2-selection__choice:nth-of-type(n+2) {
    margin-left: 2em;
    position: relative;
.select2-container--default li.select2-selection__choice:nth-of-type(n+2)::before {
    content: " OR ";
    position: absolute;
    left: -2em;

The result looks like this: