使用高亮方法并使用CSS选择器高亮显示select2 [英] Highlight a select2 using highlight method and using css selector
问题描述
我需要突出显示汽车和货车，以下功能将突出显示非多重选择列表，我需要突出显示多重选择和非多重选择.
I need to highlight both cars and vans, the below function will highlight for non multiple select2 list, I need to highlight multiple and non multiple selects.
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(type, selector) {
$(type+'select2-'+ selector +'-container').effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
$('#cars').select2();
$('#vans').select2();
highlightSelect2("#","cars")
highlightSelect2("#","vans")
});
</script>
</body>
</html>
推荐答案
您可以定义实际的select2类，这些类在库中将始终相同，并且永不更改.
You can define the actual select2 classes which will be always same in the library and never changes.
首先，检查select2是否为多个.并通过传递true相应地调用highlightSelect2函数，用于multiple选择突出显示else和普通的__rendered select2选项.
Firstly, check if the select2 is multiple or not. And call your highlightSelect2 function accordingly by passing true for multiple select highlight else and for normal __rendered select2 options.
在您的html selects中添加一个类，并检查它们是否具有多个属性，并为html选择的highlighting调用select2.
Add a class to your html selects and check if they have prop of multiple and call select2 for highlighting that html select.
工作演示:
function highlightSelect2(isMultiple = null) {
//is multiple
var isWhat = isMultiple ? '--multiple' : '__rendered'
//highlight
$('.select2-selection' + isWhat).effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2();
//check each and highlight
$('.mySelect').each(function(index, element) {
//check if its muliple
let prop = $(element).prop('multiple')
//call functions
prop ? highlightSelect2(prop) : highlightSelect2()
})
});
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
</body>
</html>
这篇关于使用高亮方法并使用CSS选择器高亮显示select2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
