<select> Тег не работает внутри бутстрапа выпадающего списка

Question

Я хочу разместить выбранный тег внутри бутстрапа выпадающего списка. Когда я пытаюсь выбрать любую опцию, тег select будет закрыт. Любая идея, почему это происходит. Я хочу, чтобы это успешно достичь

<div class="dropdown"> 
    <button class="btn btn-info editbtn" data-toggle="dropdown"> 
     <i class="fa fa-pencil" aria-hidden="true"></i></button> 
    <ul class="dropdown-menu"> 
     <li><label>Label</label><input class="form-control InputRequired" type="text"></li> 
     <li><label>Placeholder</label><input class="form-control InputRequired" type="text"></li> 
     <li><label>Type</label> 
      <select class="form-control"> 
       <option value="volvo">Volvo</option> 
       <option value="volvo">Volvo</option> 
       <option value="volvo">Volvo</option> 
       </select> 
      </li><br> 
     <button class="btn btn-info save">Save</button> 
     </ul> 
    </div> 
</div> 

Answer 1

Хотя вы не должны использовать выпадающее меню, таким образом, если вы абсолютно хотите сделать это, вы можете вручную вызвать выпадающее меню переключения самостоятельно.

Причина, по которой выпадающее меню очищается, заключается в том, что событие click.bs.dropdown.data-api на document запускается при нажатии на элемент select.

Этого можно избежать, если выпадающее меню не запускается с помощью переключателя [data-toggle="dropdown"].

Недостатком является то, что вы не можете закрыть раскрывающееся меню, щелкнув выпадающее меню. Конечно, вы всегда можете добавить дополнительное событие, чтобы закрыть его, но это зависит от вас.

(function($, window, document) { 
 
    $("#dropdown").on("click", function() { 
 
    $(this).parent().toggleClass("open"); 
 
    }); 
 

 
    $("#dropdown-save").on("click", function() { 
 
    $(this).closest(".dropdown").removeClass("open"); 
 
    }); 
 
})(jQuery, window, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
<div class="dropdown"> 
 
    <button id="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown Example 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">HTML</a></li> 
 
    <li><a href="#">CSS</a></li> 
 
    <li> 
 
     <label for="label">Label</label> 
 
     <input type="text" id="label"> 
 
    </li> 
 
    <li> 
 
     <select> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </li> 
 
    <li> 
 
     <button id="dropdown-save">Save</button> 
 
    </li> 
 
    </ul> 
 
</div>