我尝试将鼠标悬停在
select2titlePop1
textPop1
当我将鼠标悬停在“高度努力”上时，它会返回以下内容：
titlePop2
textPop2
但效果应用于整个容器，即应用于
.select-results代码：
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/animate.css@3/animate.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/wNumb.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<section>
<div id='pickerDivA1'>
<h6>fadeIn</h6>
<select id="testId">
<option value="AL">Low effort</option>
<option value="WY">High effort</option>
</select>
</div>
</section>
<script>
$(document).ready(function() {
$('#testId').select2({
dropdownParent: $("#pickerDivA1"),
minimumResultsForSearch: Infinity,
dropdownPosition: 'below'
}).on('select2:open', function(e) {
$('.select2-dropdown').addClass('animated flipInX');
let titles = ['titlePop1', 'titlePop2'];
let contents = ['textPop1', 'textPop2'];
let $lis = $(this).data('select2').$dropdown.find('.select2-results__options');
$lis.each(function(i) {
if (!$(this).hasClass('select2')) {
$(this).popover({
html: true,
sanitize: false,
title: titles[i],
content: contents[i],
trigger: 'hover',
placement: 'right',
container: 'body'
})
};
});
}).on('select2:closing', function(e) {
$('.select2-dropdown').removeClass('animated flipInX');
});
});
</script>
</body>我也尝试过这个：
let $lis = $('#testId').data('select2').$dropdown.find('.select2-results__option--highlighted');
但不工作。
您需要为
li<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/animate.css@3/animate.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/wNumb.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<section>
<div id='pickerDivA1'>
<h6>fadeIn</h6>
<select id="testId">
<option value="AL">Low effort</option>
<option value="WY">High effort</option>
</select>
</div>
</section>
<script>
$(document).ready(function() {
$('#testId').select2({
dropdownParent: $("#pickerDivA1"),
minimumResultsForSearch: Infinity,
dropdownPosition: 'below'
}).on('select2:open', function(e) {
$('.select2-dropdown').addClass('animated flipInX');
let titles = ['titlePop1', 'titlePop2'];
let contents = ['textPop1', 'textPop2'];
var $this = $(this)
setTimeout(function() {
let $lis = $this.data('select2').$results.find('li');
$lis.each(function(i) {
$(this).popover({
html: true,
sanitize: false,
title: titles[i],
content: contents[i],
trigger: 'hover',
placement: 'right',
container: 'body'
})
});
})
}).on('select2:closing', function(e) {
$('.select2-dropdown').removeClass('animated flipInX');
});
});
</script>
</body>