Select2 jQuery - How can I select a specific element in Select2 dropdown for changing arbitrary css property?

Question

Basically, I only need to change one item's color in the dropdown when certain conditions are met so it can visually be different from others.

I can't find any specific way to select an element, because the id of the element is always changed whenever I reload the page, but there is a beginning and ending that is known. For example, this is one of the ids:

id="select2-id_category-result-8ejj-25"

The first fixed part is select2-id_category-result- and the second fixed part is -25 , between varies. Other items in the list have different middle part and ending as their IDs.

If I construct the selector like this:

$('li[id^="select2-id_category-result"][id$="-25"]');

It never finds any element. What is the correct way to construct this kind of selector?

Answer 1

You can use select2-results__options class and .find() to change required li tag color. Also, you will only be able to change color of li tag when the option-box are open else it will not work because select2 generate that elements when you click on select element and by default they don't exist inside dom.

Demo Code :

 $(function() { $(".select2").select2({ "width": "100px" }); var save_Reference = ""; //wheen sleect is clicked $(document).on("click", ".select2", function() { //for further use if need id save_Reference = $(".select2-results__options").find("li[id$=-2]").attr("id") console.log(save_Reference) //or use it like this change 2 to 25 $(".select2-results__options").find("li[id$=-2]").css("color", "red") }) })

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" /> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> <select class="select2"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>