Question

我想将select标签放在bootstrap下拉列表中。当我尝试选择任何选项时，select标签将关闭。知道为什么会这样。我想解决这个问题＆lt; div class =＆＃34; dropdown＆＃34;＆gt; ＆lt; button class =＆＃34; btn btn-info editbtn＆＃34;数据肘节=＆＃34;下拉＆＃34;＆GT; ＆lt; i class =＆＃34; fa fa-pencil＆＃34;咏叹调隐藏=＆＃34;真＆＃34;＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT; ＆lt; ul class =＆＃34;下拉菜单＆＃34;＆gt; ＆lt; li＆gt;＆lt; label＆gt;标签＆lt; / label＆gt;＆lt;输入类=＆＃34;表单控件InputRequired＆＃34;类型=＆＃34;文本＆＃34;＆GT;＆LT; /锂＆GT; ＆lt; li＆gt;＆lt; label＆gt;占位符＆lt; / label＆gt;＆lt;输入类=＆＃34;表单控件InputRequired＆＃34;类型=＆＃34;文本＆＃34;＆GT;＆LT; /锂＆GT; ＆LT;李＆GT;＆LT;标签＆gt;的类型＆lt; /标签＆gt; ＆lt; select class =＆＃34; form-control＆＃34;＆gt; ＆lt; option value =＆＃34; volvo＆＃34;＆gt; Volvo＆lt; / option＆gt; ＆lt; option value =＆＃34; volvo＆＃34;＆gt; Volvo＆lt; / option＆gt; ＆lt; option value =＆＃34; volvo＆＃34;＆gt; Volvo＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; /立GT;＆LT峰; br＆GT; ＆lt; button class =＆＃34; btn btn-info save＆＃34;＆gt;保存＆lt; / button＆gt; ＆LT; / UL＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

Answer 1

虽然您不应该以这种方式使用下拉菜单，但如果您绝对想要这样做，您可以自己手动触发下拉菜单切换。

下拉列表被清除的原因是，当您点击click.bs.dropdown.data-api元素时，document上的select事件就会被触发。

如果使用[data-toggle="dropdown"]选择器未触发下拉菜单，则可以避免这种情况。

缺点是您无法通过在下拉菜单外单击来关闭下拉列表。当然，您可以随时添加其他活动来关闭它，但这取决于您。

＆＃13;

(function($, window, document) {
  $("#dropdown").on("click", function() {
    $(this).parent().toggleClass("open");
  });

  $("#dropdown-save").on("click", function() {
    $(this).closest(".dropdown").removeClass("open");
  });
})(jQuery, window, document);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

<div class="dropdown">
  <button id="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li>
      <label for="label">Label</label>
      <input type="text" id="label">
    </li>
    <li>
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </li>
    <li>
      <button id="dropdown-save">Save</button>
    </li>
  </ul>
</div>

＆＃13;

<select>标记在引导程序下拉列表中不起作用

1 个答案: