Show bootstrap-select inside bootstrap button dropdown

Stackoverflow answer: http://stackoverflow.com/questions/25443347/show-bootstrap-select-inside-bootstrap-button-dropdown/25475203#25475203

by bigwelly

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Take <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>    
                            <select class="selectpicker">
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Relish</option>
								</select>
                        </form>
                    </li>
                </ul>
            </div>
         </div><!--/.col -->
    </div><!--/.row -->
</div><!--/.container -->

JavaScript

$('.dropdown-menu').on('click', function(event) {
	event.stopPropagation();
});

$('.selectpicker').selectpicker({
	container: 'body'
});

$('body').on('click', function(event) {
	var target = $(event.target);
	if (target.parents('.bootstrap-select').length) {
		event.stopPropagation();
		$('.bootstrap-select.open').removeClass('open');
	}
});