单击另一个select2下拉菜单时如何保持select2下拉事件打开

Question

I have multiple select2 dropdowns. Whenever the select2 dropdown is open, I want to add class to my div.

For this I am using open and close event of select2. The below code works fine when you open a select2 dropdown and close it. But it does not work if you have a select2 dropdown open and click on another select2 dropdown. In that case it detects close event.

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

How do I make sure that when select2 dropdown is open and user tries to open another select2 dropdown then close event is not fired.

Answer 1

Try binding elements with IDs

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

or bind elements with 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

Try this way

$(".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

You can use filter() and 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>