Show bootstrap-select inside bootstrap button dropdown

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

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>


<div class="container">
    <div class="row">
        <div class="col-xs-12">
         <select class="form-control" id="mult1" multiple="multiple">
         </select>
            <div class="btn-group">
                <button type="button" id="dropBtn" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>
                           <select class="form-control" id="mult2" multiple="multiple">
                           </select>
                           <button>
                             foobar
                           </button>
                        </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');
	}
});

setUpMultiselect('#mult1');
setUpMultiselect('#mult2');

function setUpMultiselect(id) {
  $(id).multiselect({
    enableFiltering: true,
    includeFilterClearBtn:false,
    enableCaseInsensitiveFiltering: true,
    selectAllJustVisible : true,
    includeSelectAllOption : true,
    nonSelectedText:"Filter ...",
    numberDisplayed : 1,
    onFiltering: function(option) {
      console.log('on filtering');
    },
    onSelectAll: function() {
      console.log('onSelectAll')
    },
    onDeselectAll: function() {
      console.log('onDeselectAll')
    },
    onChange :function( element, checked) {
      console.log('onChange');
    }
  });

  const options = [
    {
      title: 'title1',
      label: 'label1',
      id: 'id1',
      selected: true,
    },{
      title: 'title2',
      label: 'label2',
      id: 'id2',
      selected: true,
    },{
      title: 'title3',
      label: 'label3',
      id: 'id3',
      selected: true,
    }]
  $(id).multiselect('dataprovider', options);
  $(id).multiselect('rebuild');
}

$('#dropBtn').click(() => {
	setTimeout(() => {
    setUpMultiselect('#mult1');
    setUpMultiselect('#mult2');
  }, 500)
})