Select2jQuery-如何在Select2下拉列表中选择特定元素来更改任意css属性

Question

基本上，当满足某些条件时，我只需要在下拉列表中更改一个项目的颜色，这样它就可以在视觉上与其他项目不同。

我找不到任何特定的方法来选择元素，因为每当我重新加载页面时，元素的id总是会更改，但有一个已知的开始和结束。例如，这是其中一个id：

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

第一固定部分是select2-id_category-result-，第二固定部分是-25，两者之间变化。列表中的其他项目具有不同的中间部分，并以其ID结尾。

如果我这样构造选择器：

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

它从未找到任何元素。构造这种选择器的正确方法是什么？

Answer 1

您可以使用select2-results__options类和.find()来更改所需的li标记颜色。此外，只有当选项框打开时，您才能更改li标记的颜色，否则它将不起作用，因为select2会在您单击select元素时生成这些元素，默认情况下它们不存在于dom中。

演示代码 :

$(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>