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

【问题标题】：How to keep select2 dropdown event open when clicking on another select2 dropdown单击另一个select2下拉菜单时如何保持select2下拉事件打开
【发布时间】：2019-07-31 06:04:19
【问题描述】：

我有多个 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 下拉菜单时不会触发关闭事件。

【问题讨论】：

你能分享你的html代码吗？
您要添加/删除只打开一个 select2 还是至少打开一个 select2 的类？
@User863 我想在所有 select2 打开时为它们添加类，并在关闭时删除类

标签： javascript jquery html css jquery-select2

【解决方案1】：

试试这个方法

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

【讨论】：

【解决方案2】：

尝试使用 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");
});

【讨论】：

不，它们不是动态的
然后你可以使用 $.each 绑定每个选择元素

【解决方案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>

【讨论】：