title: Show bootstrap-select inside bootstrap button dropdown
body: <p>I use Bootstrap button dropdown to show a form. I have disabled dropdown disappearing onclick (while user manipulates the form) by calling <code>stopPropagation</code>. One of the elements of the form is a dropdownlist. If I use a native html select element everything is okay (except is looks ugly). If I replace it with bootstrap-select (which imitates select by divs), I can not select a value (as there is not enough place in the button dropdown). I tried to apply a workaround to specify <code>container: 'body'</code> for bootstrap-select. It helps to see dropdownlist values but button dropdown is closed when I select the element (I guess it happens as boostrap-select belongs to body which is higher then button dropdown to which click-propagation is applied).</p>
  
  <pre><code>            &lt;div class="btn-group"&gt;
                  &lt;button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown"&gt;
                      Take &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li&gt;
                          &lt;form&gt;    
                              &lt;select id="mySelect" class="selectPicker"&gt;
                                &lt;option&gt;1&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/form&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    $('.dropdown-menu').click(function(e) {
                  e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
              });
  
    $('.selectpicker').selectpicker({container: 'body'});
  &lt;/script&gt;
  </code></pre>