我需要突出显示汽车和货车,以下功能将突出显示非多重选择列表,我需要突出显示多重选择和非多重选择。
<!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>
答案 0 :(得分:2)
您可以定义实际的select2
类,这些类在库中将始终相同,并且永不更改。
首先,检查select2
是否为多个。并通过传递highlightSelect2
来调用true
函数,以使multiple
选择高亮显示else和普通__rendered
select2选项。
向您的HTML selects
中添加一个类,并检查它们是否具有多个属性,并为select2
选择的highlighting
调用html
。
工作演示:
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>