單擊另一個select2下拉菜單時如何保持select2下拉事件打開

Question

我有多個select2下拉菜單。 每當select2下拉列表打開時，我都想將類添加到div中。

為此，我正在使用select2的打開和關閉事件。 當您打開並關閉select2下拉列表時，以下代碼可以正常工作。 但是，如果您打開了一個select2下拉菜單並單擊另一個select2下拉菜單，則此方法不起作用。 在這種情況下，它將檢測到關閉事件。

$('select').on('select2:open', function (e) {
    $('.a').addClass("header-index");
});
$('select').on('select2:close', function (e) {
    $('.a').removeClass("header-index");
});

我如何確保當select2下拉列表處於打開狀態並且用戶嘗試打開另一個select2下拉列表時，則不會觸發close事件。

Answer 1

嘗試使用ID綁定元素

$('#select1').on('select2:open', function (e) {
    $('.a').addClass("header-index");
});
$('#select1').on('select2:close', function (e) {
    $('.a').removeClass("header-index");
});

或用索引綁定元素

$('select')[0].on('select2:open', function (e) {
    $('.a').addClass("header-index");
});
$('select')[1].on('select2:close', function (e) {
    $('.a').removeClass("header-index");
});

Answer 2

試試這個

$(".js-example-events").select2();

$('.js-example-events').on("select2:open", function () { alert(1); });
$('.js-example-events').on("select2:close", function () { alert(2); });

<select class="js-example-events">
<option>Select</option>
<option>Select1</option>
</select>

https://jsfiddle.net/lalji1051/4qucL9h3/7/

Answer 3

您可以使用filter()和select2('isOpen')

 $('select').select2() $(document).on('select2:open select2:close', function(e) { let opened = $('select').filter(function() { return $(this).select2('isOpen') }).length $('.a').toggleClass('header-index', Boolean(opened)); }); 

 .header-index { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script> <div class="a">header-index</div> <select style="width: 300px"> <option value="JAN">January</option> <option value="FEB">February</option> <option value="MAR">March</option> <option value="APR">April</option> <option value="MAY">May</option> <option value="JUN">June</option> <option value="JUL">July</option> <option value="AUG">August</option> <option value="SEP">September</option> <option value="OCT">October</option> <option value="NOV">November</option> <option value="DEC">December</option> </select> <select style="width: 300px"> <option value="JAN">January</option> <option value="FEB">February</option> <option value="MAR">March</option> <option value="APR">April</option> <option value="MAY">May</option> <option value="JUN">June</option> <option value="JUL">July</option> <option value="AUG">August</option> <option value="SEP">September</option> <option value="OCT">October</option> <option value="NOV">November</option> <option value="DEC">December</option> </select>