CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
anonymoose
anonymoose

Reputation: 1243

How to Keep Bootstrap Dropdown Open with Select

I have a bootstrap dropdown with a select box which has a few options that I want there. It looks fine until I click on it, the drop-down closes. How can I keep the drop-down open if I click on the select box?

Here's a bootply.

Upvotes: 1

Views: 2871

Answers (3)

Vega
Vega

Reputation: 28701

Here is a version without js, but may have some inconveniences:

<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

Upvotes: 1

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7147

Add onclick="event.stopPropagation();" to your <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>

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362280

You just need 2 changes...

  1. add .dropdown class to the .btn-group
  2. wrap the select in a <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>

Upvotes: 1

Related Questions