Select2 jQuery - 如何 select Select2 下拉列表中的特定元素以更改任意 css 属性？

Question

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

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

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

第一个固定部分是select2-id_category-result-，第二个固定部分是-25，两者之间有所不同。列表中的其他项目具有不同的中间部分和结尾作为它们的 ID。

如果我构建 select 或者像这样：

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

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

Answer 1

您可以使用 select2-results__options class 和 .find() 来更改所需的 li 标签颜色。此外，您只能在选项框打开时更改 li 标签的颜色，否则它将不起作用，因为当您单击 select 元素时 select2 会生成该元素，然后默认它们不存在于 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>

Select2 jQuery - 如何 select Select2 下拉列表中的特定元素以更改任意 css 属性？

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

jquery

jquery-select2