title: Insert select2 into Bootstrap dropdown
body: <p>I have a problem trying to insert a <a href="http://ivaynberg.github.com/select2/" rel="nofollow noreferrer">select2</a> into a <a href="http://twitter.github.com/bootstrap/components.html#dropdowns" rel="nofollow noreferrer">dropdown-menu</a> from Bootstrap. The markup is like so:</p>
  
  <pre><code>&lt;ul class="dropdown-menu dropdown-select-box"&gt;
      &lt;li&gt;
          Choose categories:
          &lt;select id="choose-category" multiple=""&gt;
              &lt;option&gt;&lt;/option&gt;
              &lt;option&gt;&lt;/option&gt;
              &lt;option&gt;&lt;/option&gt;
          &lt;/select&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The .dropdown-select-box class in mine, for styling purposes and better control. I just can't seem to get it to work and it's driving me crazy and costing me precious time. Here is the result I wish to achieve with this:</p>
  
  <p><img src="https://i.stack.imgur.com/yHCqe.jpg" alt="Select2 into Boostrap&#39;s dropdown-menus"></p>
  
  <p>This means that the select2-container needs to be open at all times and (somehow) positioned relative to the dropdown-menu, so that the dropdown-menu can scale to the select2-container's size. I've tried to wrap my mind around this but came out empty handed.</p>