How to incorporate the <select> element within a bootstrap dropdown?

Question

Fiddle

The following fiddle allows a <select> dropdown element to be included as one of the <li> elements within a bootstrap dropdown.

---

The current problem within the fiddle is when the <select> 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]

Therefore, is it possible, within the attached fiddle, to allow the <select> element to work properly, allowing the user to select from the dropdown list, within the bootstrap?

If an updated fiddle could please be provided, it would be extremely appreciated, as I am still new to coding.

Thank You!

HTML

<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
</a>
<ul class="dropdown-menu">
    <li><select data-toggle="dropdown" class="form-control" data-property="color">
            <option disabled>Select color:</option>
            <option>red</option>
            <option>green</option>
            <option>blue</option>
            <option>white</option>
            <option>black</option>
        </select></li>
</ul>

Answer 1

Add these lines of javascript to your fiddle

$('.dropdown-menu option, .dropdown-menu select').click(function(e) {
        e.stopPropagation();
});

Here is a fork

Answer 2

Take the data-toggle="dropdown" off of your select element. Then add the class "preventDefault" to the li and add a function that stops propagation of events when that element is clicked like this:

$(document).on('click', '.preventDefault', function(e) {
  e.stopPropagation();
  e.preventDefault();
});
// add the below if selecting an option should close the dropdown
$('.dropdown-menu option, .dropdown-menu select').change(function(e) {
  $('.dropdown.open .dropdown-toggle').dropdown('toggle').blur();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="dropdown btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
    </a>
  <ul class="dropdown-menu">
    <li class="preventDefault">
      <select class="form-control" data-property="color">
        <option disabled>Select color:</option>
        <option>red</option>
        <option>green</option>
        <option>blue</option>
        <option>white</option>
        <option>black</option>
      </select>
    </li>
  </ul>
</div>