How to pass <option> attributes to select2?
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>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
});