如何融入 <select>引导下拉列表中的元素？

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>