Bootstrap 3: Add a select list in button group

Question

I am trying to build a small search box using bootstrap button group, in which I want provision to select the field and value to search for. I tried with the following code and the UI is fine. But when I click on the dropdown to select the field (or any empty space), the form gets closed. Is there a way to achieve something like this (without building a custom form etc.)?

<div class="btn-group">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown">
        Search <span class="caret"></span>
    </button>
    <div class="col-sm-12 dropdown-menu">
        <select class="form-control" >
            <option value="id">ID</option>
            <option value="Name">Name</option>
        </select>
        <input type="text" class="form-control" />
        <button>Reset</button>
        <button class="pull-right">Go</button>
    </div>
</div>

jsfiddle: http://jsfiddle.net/krishnasarma/u891Lcrd/

score 2 · Accepted Answer · answered Sep 05 '15 at 04:01

2

You can just add the following script in your script section. It will avoid your problem.

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

JSFiddle Link

http://jsfiddle.net/vinodudhaya/u891Lcrd/2/.

answered Sep 05 '15 at 04:01

vinodh

714
1
7
20

I have checked in jsfiddle . Lemme know your thoughts. – vinodh Sep 05 '15 at 04:02

Yandy_Viera · Answer 2 · 2015-09-07T14:24:58.917

When you click on the dropdown to select the field (or any empty space), the form gets closed because this is how the .dropdown-menu of bootstrap works, when you click on the button.dropdown-toggle bootstrap add the class open to its parent (.btn-group in this case) and there is the style:

.open>.dropdown-menu {/*at this point the menu is showing*/
    display: block;
}

Then when you click anywhere on the page, including the menu itself bootstrap remove the class open so the menu is hidden again.

Now knowing how it works lets fix it to achieve what you want, first we have to avoid that the menu is hidden when you click anywhere on it:

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

I suppose that you still want to hide it when you click on the button Go, if not forget this part.

$('#search-btn').click(function(e) {
    $('.open').removeClass('open');
});

Now let's put it all together:

Here a working JSFiddle fork from yours

$('.dropdown-menu').click(function(e) {
   e.stopPropagation();
});
$('#search-btn').click(function(e) {
   $('.open').removeClass('open');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
  <button type="button" class="dropdown-toggle" data-toggle="dropdown">
    Search <span class="caret"></span>
  </button>
  <div class="col-sm-12 dropdown-menu">
    <select class="form-control" >
      <option value="id">ID</option>
      <option value="Name">Name</option>
    </select>
    <input type="text" class="form-control" />
    <button>Reset</button>
    <button id="search-btn" class="pull-right">Go</button>
  </div>
</div>

Bootstrap 3: Add a select list in button group

2 Answers2

JSFiddle Link