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/

Answer 1

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/.