Question

小提琴以下小提琴允许＆lt; select＆gt;下拉元素将被包括为＆lt; li＆gt;之一。引导下拉列表中的元素。小提琴中的当前问题是当＆lt; select＆gt;时。单击下拉元素，它将立即消失，以及引导下拉列表，并且不允许用户从下拉列表中选择一个选项。 [在Mac OS X上的Chrome中发生] 因此，在附加的小提琴中是否可以允许＆lt; select＆gt;元素工作正常，允许用户从引导程序中的下拉列表中进行选择？如果可以提供更新的小提琴，我将非常感激，因为我还是新编码。谢谢！ HTML ＆lt; div class =“dropdown btn-group”＆gt; ＆lt; a class =“btn dropdown-toggle”data-toggle =“dropdown”href =“＃”＆gt; 行动＆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;禁用选项＆gt;选择颜色：＆lt; / option＆gt; ＆LT;选项＆GT;红色＆LT; /选项＆GT; ＆LT;选项＆GT;绿色＆LT; /选项＆GT; ＆LT;选项＆GT;蓝色＆LT; /选项＆GT; ＆LT;选项＆GT;白＆LT; /选项＆GT; ＆LT;选项＆GT;黑色＆LT; /选项＆GT; ＆LT; /选择＆GT;＆LT; /锂＆GT; ＆LT; / UL＆GT;

Answer 1

将这些javascript行添加到你的小提琴

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

这是fork

Answer 2

从你的select元素中取出data-toggle="dropdown"。然后添加类＆＃34; preventDefault＆＃34;到li并添加一个函数，当单击该元素时停止事件的传播：

＆＃13;

$(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();
});

＆＃13;

<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>

＆＃13;

如何在引导下拉列表中包含<select>元素？

2 个答案: