时间戳

首页 > 解决方案 > Select2 jQuery - 如何在 Select2 下拉列表中选择特定元素以更改任意 css 属性？

jquery - Select2 jQuery - 如何在 Select2 下拉列表中选择特定元素以更改任意 css 属性？

问题描述

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

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

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

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

如果我这样构造选择器：

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

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

标签： jqueryjquery-select2

解决方案

您可以使用select2-results__optionsclass 并.find()更改所需的 li 标签颜色。此外，您只能li在选项框打开时更改标签的颜色，否则它将不起作用，因为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>

推荐阅读