Can't open select element within Bootstrap dropdown menu

Question

I've set Bootstrap's dropdown menu to not close when clicking anywhere else and the select element to not close when being clicked on:

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>

thevarunraja · Accepted Answer · 2016-08-04 14:38:20Z

1

update the following method in your jquery

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

answered Aug 4, 2016 at 14:38

thevarunraja

3263 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't open select element within Bootstrap dropdown menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related