Question

我的UI有一些从Bootstrap创建的下拉列表，我用它来包含一些表单元素。我使用我在这里找到的解决方案阻止了下拉关闭，这几乎是完美的： Avoid dropdown menu close on click inside

剩下的问题是我使用Select2多重选择和删除选项的特定实例。删除行为似乎遵循不同的事件链，因为它关闭了下拉列表。我的假设是事件传播到父元素，但我似乎无法确定哪个。

这是一个JSFiddle来说明问题。选择一个选项，然后将其删除以查看会发生什么。下面是包含jsfiddle时所需的代码。当然，它从我的实际代码中减少了，但至少代表了这个问题。

$('body').on('click', '.dropdown .cycle-element', function(e) {
  $(this).parent().toggleClass('open');
});

$('body').on('click', function(e) {
  if (!$('.dropdown').is(e.target) && $('.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
    $('.dropdown').removeClass('open');
  }
});

$('.dependency-select').select2();

Answer 1

我们遇到了基本相同的问题。根本问题是当使用select2 multiselect时，删除选项时触发的取消选择事件会传播并最终关闭引导下拉列表。

处理此问题的简单方法是侦听事件并停止传播

$('your-select').on("select2:unselect", function(e) {
  if (!e.params.originalEvent) {
    return
  }

  e.params.originalEvent.stopPropagation();
});

Answer 2

@TheGremlyn你可以做什么。我没有完全测试它，但是当div关闭时，首先看看关闭select2似乎是解决方案。

您可以按以下方式关闭select2。

$('.dependency-select').select2('close');

Heres更新了代码。看看这个。 https://jsfiddle.net/c1ef7138

尝试停止Select2多选选项的事件传播删除

2 个答案: