kann nicht geöffnet werden select-Element innerhalb Bootstrap Dropdown-Menü

Question

I Bootstrap des Drop-Down-Menü festgelegt haben, schließen Sie nicht, wenn irgendwo anders und das select-Element klicken, um nicht zu schließen, wenn auf geklickt wird:

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

AKTUALISIER Die folgende Methode in Ihrer jquery

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