How to keep select2 dropdown event open when clicking on another select2 dropdown

47
July 31, 2019, at 3:30 PM

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 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 2

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 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>

READ ALSO
How to add active element id to url

How to add active element id to url

I was trying to add the id value of active element into a urlThen using a button to redirect to the url

74
How to prevent toast message on button click if form having a validation on some text field?

How to prevent toast message on button click if form having a validation on some text field?

I used something similar to toast message in my html page, when i click on submitIt shows the message

64
Unable to remove CSS property: Max-width:1200px

Unable to remove CSS property: Max-width:1200px

Using the Villagio theme in WordPress, I have found that the listings have a max-width property which causes the image not to fit within the headerI have checked all of the CSS sheets and cannot find this command to remove it

52
Slide in list items one after the other in CSS

Slide in list items one after the other in CSS

I want the list items to slide in one after the otherThis procedure in CSS seems a bit complex

51