无法在Bootstrap下拉菜单中打开select元素

Question

我将Bootstrap的下拉菜单设置为在单击其他任何位置时不关闭，并且select元素在单击时不关闭：

Here's the Codepen link to the example.

JS：

$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});

$('select.form-control').on({
    "click":             function() { this.closable = false; },
});

HTML：

<div class="btn-group dropdown keep-open">
      <button class="btn btn-default toggle-dropdown pull-right dropdown keep-open" id="saveProject" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Save to Projects</button>
      <ul class="dropdown-menu dropdown-menu-left">
    <div id="projectDetails" class="dropdown-margins">
              <h4 class="project-header">Project Name</h4>
              <select class="form-control" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                <ul class="dropdown-menu dropdown-menu-right">
                      <option value="one">One</option>
                      <option value="two">Two</option>
                      <option value="three">Three</option>
                      <option value="four">Four</option>
                      <option value="five">Five</option>
                </ul>
              </select>

              <p class="project-description">
                Description:
              </p>
              <input class="form-description project-description-margin" />

              <button class="btn btn-success">Save</button>
              <button class="btn btn-warning" id="closeProject">Discard</button>

          </div>
      </ul>
</div>

Answer 1

在jquery中更新以下方法

$('select.form-control').on({
"click":function() { event.stopPropagation(); },});