select option not working in bootstrap navbar

Question

I need to use multiple dropdown list in bootstrap dropdown link. But on select on any option, bootstrap dropdown become hide. I am using bootstrap 3 framework to do it.

Here is the code`

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Price</a>
                        <div class="dropdown-menu price-dropdown" role="menu" style="padding:10px 10px; min-width:280px;">
                        <div class="form price-form">
                            <div class="form-group">
                            <select class="form-control">
                                <option>Select Options</option>
                                <option value="">Option A</option>
                                <option value="">Option B</option>
                                <option value="">Option C</option>
                            </select>
                            </div>
                            <div class="form-group">
                            <select class="form-control">
                                <option>Select Type</option>
                                <option value="">Type A</option>
                                <option value="">Type B</option>
                                <option value="">Type C</option>
                            </select>
                            </div>
                            <div class="form-group">
                            <select class="form-control">
                                <option>Select One</option>
                                <option value="">One</option>
                                <option value="">Two</option>
                            </select>
                            </div>
                        </div>
                        </div>
                        </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

`

You can check it here - Demo

Notice that if you click and drag to select options from the list, the list hides after your option was selected. You can try to manually show the list after an element has been selected. — andreszs, Feb 04 '15 at 06:52

score 1 · Answer 1 · edited May 23 '17 at 11:57

I think this post will cover your question, as it has similar issue:

Dropdown with a form inside with twitter-bootstrap

Here is a modified version of your demo:

http://jsfiddle.net/t4a6vpqq/1/

The only addition is (JS section):

$('.dropdown-menu.price-dropdown select').click(function (e) {
    e.stopPropagation();
});

Note: this won't hide dropdown menu when you click on a select, however if you need it to work similar in case when you click in a surrounding area around select, you will need to adjust a selector.

select option not working in bootstrap navbar

1 Answers1