我只需要突出显示#vans 而不是#cars有时 #vans 可以是多个，有时也可以是非多个。但是我必须能够专门通过 ID 选择器来突出显示选择。下面是使用突出显示方法和使用 css 选择器答案突出显示 select2 的代码<!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> <script> function highlightSelect2(selector, isMultiple) { var isWhat = isMultiple ? '--multiple' : '__rendered' $('.select2-selection' + isWhat).effect("highlight", { color: '#f88' }, 10000);}$(document).ready(function() { //initilize select2 $('.mySelect').select2(); $('.mySelect').each(function(index, element) { let prop = $(element).prop('multiple') prop ? highlightSelect2("#vans",prop) : highlightSelect2("#vans") })});</script> </body></html>
1 回答
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
如果您知道只有select#vans需要突出显示的部分，则无需遍历所有 Select2 jQuery 项。此外，您highlightSelect2没有使用selector您传入的内容。
使用您的代码示例，我对其进行了修改，以便只有该#vans元素将通过以下方式突出显示：
不迭代所有
select2元素（使用.each）这让您只能
#vans直接突出显示,修改
highlightSelect2以使用传入的selector删除
isMultiple逻辑——没有必要
<!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>
<script>
function highlightSelect2(selector) {
$(selector)
.next('.select2-container')
.find(".select2-selection")
.effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2( { width: "25%" });
// highlight the #vans select2
highlightSelect2("#vans");
});
</script>
</body>
运行代码片段，您会看到它按照您对特定示例的预期运行。
添加回答
举报
0/150
提交
取消