Select2 jQuery - 如何 select Select2 下拉列表中的特定元素以更改任意 css 属性?
Select2 jQuery - How can I select a specific element in Select2 dropdown for changing arbitrary css property?
基本上,我只需要在满足某些条件时更改下拉列表中一项的颜色,以便在视觉上与其他项不同。
我找不到 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 的正确方法是什么?
您可以使用 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>
基本上,我只需要在满足某些条件时更改下拉列表中一项的颜色,以便在视觉上与其他项不同。
我找不到 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 的正确方法是什么?
您可以使用 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>