How to pass

Question

I'm using Select2 4.0. I have a list of options, some of which are "deleted" and I want to signify which are which. My select element is like this:

<style>.deleted { color: red; }</style>

<select name="itemid" id="item-list" tabindex="1">
    <option></option>
    <option value="1">Item 1</option>
    <option value="2" class="deleted">Item 2</option>
    <option value="3">Item 3</option>
</select>

And it's initialised like this:

<script src="/static/js/select2.min.js"></script>
<script>
$(function() {
    $("#item-list").select2({
        placeholder: 'Select item'
    });
});
</script>

However, on the resulting HTML code that select2 generates I don't see any way to reference that class. Also tried a data-deleted attribute on the option, with no luck.

The only thing I see that comes close is the templateResult option, where I can check for opt.element.className. But I cannot see how to access the select2 option from there. Anyway that callback runs on every single search which is not at all what I want.

Is there some other way to style particular options in Select2?

UPDATE: as noted in the comments there is a find() function, but that only gets the original <option> elements, not the <li> elements that select2 generates. Here's what I tried:

var sel2 = $("#item-list").select2({
    placeholder: 'Select item'
});

sel2.find('.deleted').each(function() {
    $(this).css('color', 'red');
});

The HTML is generated server-side, so the page is exactly like my code in the question. — DisgruntledGoat, Nov 25 '15 at 21:24
In that case, it looks like you can get attributes using `find()`: http://stackoverflow.com/questions/22261209/get-custom-data-attribute-in-select2-with-select/22261210#22261210 — isherwood, Nov 25 '15 at 21:31
4.0.0 or 4.0.1-rc.1? There was a change introduced in 4.0.1 that will make this possible. — Kevin Brown-Silva, Nov 27 '15 at 05:21

score 45 · Accepted Answer · answered Nov 28 '15 at 00:58

As of Select2 4.0.1 (just released), you can transfer classes with the templateResult option. The first parameter is the data object being displayed, and the second argument is the container that it will be displayed in.

$("select").select2({
  templateResult: function (data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
  }
});

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<select class="select2">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green">Arizona</option>
</select>

Any idea regarding it's previous version? – remonses Oct 23 '18 at 10:24 — remonses, Oct 23 '18 at 10:24

score 8 · Answer 2 · answered Oct 28 '16 at 08:06

8

If you also want to use the add the class to the selected items call the same function from templateSelection.

function select2CopyClasses(data, container) {
    if (data.element) {
        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}

$("select").select2({
    templateResult: select2CopyClasses,
    templateSelection: select2CopyClasses
});

answered Oct 28 '16 at 08:06

MarijnK

353
4
8

That's the complete answer in my opinion – user1855153 Apr 15 '17 at 18:17
Yes, that's true – Frank Apr 03 '19 at 17:45

score -1 · Answer 3 · edited Apr 02 '19 at 16:24

-1

If you want do this by default, every new select2 copy the class definition from option to select2-element. Include the code after loading select2.js

$.fn.select2.defaults.set("templateResult", function(item, li) {
  if (item && item.element && item.element.className.length) {
    $(li).addClass(item.element.className);
  }
  return item.text;
}

edited Apr 02 '19 at 16:24

Retiixx

57
8

answered Mar 29 '17 at 12:18

Frank

1,901
20
27

Please make a sample why this dosn't work. It works fine on some customer projects so what kind of error you get? – Frank Apr 27 '18 at 21:09

How to pass

3 Answers3

Linked

How to pass attributes to select2?

3 Answers3

Linked

How to pass