so I'm using Select2 4 library ( https://select2.github.io/ ) and I have a problem.
<select id="test" multiple style="width:800px;">
<option value="a">aaaaa</option>
<option value="b">bbbbb</option>
<option value="c">cccc</option>
<option value="d">ddddd</option>
</select>
(...)
$("#test").select2({
tags: true,
tokenSeparators: [',', ' ']
})
This is generating, after making some choices DOM element, which contains some <li>
s
So - it works fine. But I need to add my classes to those <li>
elements after changing. I don't know how to do that because Select2 rewrites my classes instantly after adding.
I've tried something like this:
selectEl.change(function() {
var elements = $('.select2-selection > ul > li');
elements.each(function() {
$(this).addClass('my-test-class');
});
});
but nothing changes (except for the last element, which is an input). I mean - I think it works, but Select2 instantly rewrites it.
I've tried doing it using change, select2:select listeners and none of those works fine.
The idea is - adding 'select2-auto' to <li>
s that are chosen from the drop-down list, and 'select-manual' class to the others.
You can use templateSelection:
for custom tags styles please find below snippet for your reference..
templateSelection: function(selection) {
if(selection.selected) {
return $.parseHTML('<span class="customclass">' + selection.text + '</span>');
}
else {
return $.parseHTML('<span class="customclass">' + selection.text + '</span>');
}
}
$("#test").select2({ tags: true, allowClear: true, // closeOnSelect: false, tokenSeparators: [',', ' '], templateSelection: function(selection) { if(selection.selected) { return $.parseHTML('<span class="customclass">' + selection.text + '</span>'); } else { return $.parseHTML('<span class="customclass">' + selection.text + '</span>'); } } }); $("#test").on("select2:select", function(e) { $("li[aria-selected='true']").addClass("customclass"); $("li[aria-selected='false']").removeClass("customclass"); $('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css'); }); $("#test").on("select2:unselect", function(e) { $("li[aria-selected='false']").removeClass("customclass"); });
.selectRow { display : block; padding : 20px; } .select2-container { width: 200px; } .customclass { color:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <select id="test" multiple style="width:800px;"> <option value="a">aaaaa</option> <option value="b">bbbbb</option> <option value="c">cccc</option> <option value="d">ddddd</option> </select>
dropdownCssClass
Property use for adding class to the select2 drop-down menu. Something like this,
$("#test").select2({
tags: true,
tokenSeparators: [',', ' '],
containerCssClass: "my-test-class",
dropdownCssClass: "test-class"
});
I hope this will work for you. Thanks.
$("#test").select2({ tags: true, allowClear: true, // closeOnSelect: false, tokenSeparators: [',', ' '] }); $("#test").on({ "select2:select": function(e) { $("li[aria-selected='true']").addClass("customclass"); $("li[aria-selected='false']").removeClass("customclass"); }, "select2:opening": function(e) { setTimeout(function(){ $("li[aria-selected='true']").addClass("customclass"); $("li[aria-selected='false']").removeClass("customclass"); },0) }, "select2:unselect" : function(e) { $("li[aria-selected='false']").removeClass("customclass"); } });
.selectRow { display : block; padding : 20px; } .select2-container { width: 200px; } .customclass { color:red; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <select id="test" multiple style="width:800px;"> <option value="a">aaaaa</option> <option value="b">bbbbb</option> <option value="c">cccc</option> <option value="d">ddddd</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.