突出显示将id选择器传递给函数的特定select2 [英] Highlight the specific select2 passing the id selector to the function
问题描述
我只需要突出显示#vans而不是#cars
I need to highlight only the #vans and not the #cars
有时#vans可以是多个，有时也可以是非多个.但是，我必须能够专门传递ID选择器以突出显示该选择.以下是使用高亮方法突出显示select2的以下代码并使用CSS选择器答案
Sometimes #vans can be multiple and sometimes it can be a non multiple too. However I must be able to specifically pass the ID selector to highlight the select. Here is the code below from Highlight a select2 using highlight method and using css selector answer
<!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>
推荐答案
如果知道只有select#vans需要突出显示，则不需要遍历所有Select2 jQuery项.此外，您的highlightSelect2没有使用您传入的selector.
If you know that only the select#vans needs highlighting, you don't need to iterate over all Select2 jQuery items. Additionally, your highlightSelect2 isn't using the selector you've passed in.
使用您的代码示例，我对其进行了修改，以便仅#vans元素将以以下方式突出显示:
Using your code sample, I've modified it so that only the #vans element will be highlighted by:
- 不遍历所有
select2元素(使用.each)- 这可以让您仅直接突出显示
#vans
- not iterating over all
select2elements (using.each)- This lets you only highlight the
#vans, directly
<!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>运行代码段，您将看到它对特定示例的预期效果.
Run the code snippet and you'll see it works as you expect for your specific example.
这篇关于突出显示将id选择器传递给函数的特定select2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- This lets you only highlight the
- 这可以让您仅直接突出显示
