title: How to incorporate the <select> element within a bootstrap dropdown?
body: <p><a href="http://jsfiddle.net/BqKNV/472/" rel="nofollow">Fiddle</a></p>
  
  <p>The following fiddle allows a <code>&lt;select&gt;</code> dropdown element to be included as one of the <code>&lt;li&gt;</code> elements within a bootstrap dropdown.</p>
  
  <hr>
  
  <p>The current problem within the fiddle is when the <code>&lt;select&gt;</code> dropdown element is clicked, it will disappear immediately, as well as the bootstrap dropdown, and not allow the user to select an option from the dropdown list.
  [Occurring in Chrome on Mac OS X]</p>
  
  <p>Therefore, is it possible, within the attached fiddle, to allow the <code>&lt;select&gt;</code> element to work properly, allowing the user to select from the dropdown list, within the bootstrap?</p>
  
  <p>If an updated fiddle could please be provided, it would be extremely appreciated, as I am still new to coding. </p>
  
  <p>Thank You!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="dropdown btn-group"&gt;
  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
      Action
      &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;select data-toggle="dropdown" class="form-control" data-property="color"&gt;
              &lt;option disabled&gt;Select color:&lt;/option&gt;
              &lt;option&gt;red&lt;/option&gt;
              &lt;option&gt;green&lt;/option&gt;
              &lt;option&gt;blue&lt;/option&gt;
              &lt;option&gt;white&lt;/option&gt;
              &lt;option&gt;black&lt;/option&gt;
          &lt;/select&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>