如何使用Select保持Bootstrap Dropdown打开

Question

我有一个带有选择框的引导下拉列表，其中有一些我想要的选项。它看起来很好，直到我点击它，下拉关闭。如果单击选择框，如何保持下拉列表打开？

something like this old issue.

Answer 1

您只需要进行2次更改......

1. 将.dropdown类添加到.btn-group
2. 将选项包装在<form>
中

https://www.bootply.com/4lwQ9hCY7k

<div class="btn-group dropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <form>
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>
    </form>  
  </ul>
</div>

Answer 2

将onclick="event.stopPropagation();"添加到您的<select>

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <select onclick="event.stopPropagation();">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </ul>
</div>

Answer 3

这是一个没有js的版本，但可能会有一些不便之处：

<div class="dropdown">
  <a class="btn dropdown-toggle" data-toggle="collapse" data-target="#list">
    Menu
    <span class="caret"></span>
  </a>

  <ul id="list" class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
   </ul>
</div>

DEMO