javascript - How to incorporate the <select> element within a bootstrap dropdown? - Stack Overflow

admin管理员组

文章数量:1278858

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>

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>

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Nov 11, 2015 at 2:44 DaveDave 78699 silver badges2727 bronze badges 1

• few things:--- not sure why you using <select> inside <li> also I wouldn't use data-toggle tag. And finally, I would not to use select option because it will look different in different browser specially in firefox.(Personal experience).... and here is something that can help you silviomoreto.github.io/bootstrap-select – sagarthapa Commented Nov 11, 2015 at 3:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Add these lines of javascript to your fiddle

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

Here is a fork

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn./twitter-bootstrap/2.3.2/css/bootstrap-bined.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn./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>

本文标签： javascriptHow to incorporate the ltselectgt element within a bootstrap dropdownStack Overflow