Question

我试图在bootstrap下拉列表中添加使用select2插件构建的自定义选择框，但是当我单击选择框时，引导程序下拉列表将关闭。有人可以帮帮我吗？

HTML

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <select class="select">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </ul>
</div>

的Javascript

$(".select").select2({
  minimumResultsForSearch: -1,
});

我在以下jsfiddle中模拟了我的问题：

https://jsfiddle.net/arunvenugopal11/qmh7jt5j/4/

Answer 1

要实现您的目标，您可以使用以下代码。

$(document).on("click", function(e) {
  if ($(e.target).closest("div.dropdown").length) {
    $(e.target).closest("div.dropdown").addClass("open")
  }
})


$(".select").on("change", function() {
  $("div.dropdown").removeClass("open")
})

更新了示例here

单击选择框后，Bootstrap下拉列表将关闭

1 个答案: