单击选择选择器时防止引导下拉菜单关闭

Question

我想在引导下拉菜单中制作过滤器部分

但是当我点击我的选择表单 bootstrap selectpicker 时，引导下拉菜单会自动关闭。

我应该怎么做才能在单击选择器时不关闭下拉菜单

这里是我的fiddle project

HTML

<div class="container">
  <div class="row justify-content-center mt-5">
    <div class="col-md-6">
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton">
          <div class="form-group">
            <select id="filter" name="filter">
              <option value=""></option>
              <option value="one">One</option>
              <option value="two">Two</option>
              <option value="three">Three</option>
            </select>
          </div>

          <div class="form-group">
            <select id="filter2" class="select-picker" name="filter2">
              <option value=""></option>
              <option value="one">One</option>
              <option value="two">Two</option>
              <option value="three">Three</option>
            </select>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</div>

JS

$(document).on('click', '.dropdown-menu', function (e) {
    e.stopPropagation();
});

$('.select-picker').selectpicker();