Twitter Bootstrap 下拉菜单无法按预期工作答案

【问题标题】：Twitter Bootstrap dropdown menu doesn't work as expectedTwitter Bootstrap 下拉菜单无法按预期工作
【发布时间】：2017-04-12 21:26:14
【问题描述】：

我正在使用以下代码为用户提供可供选择的按钮：

<div class="row">
<div class="dropdown col-md-6">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Employee Privilege
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">HR</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Admin</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Employee</a></li>
    </ul>
  </div>
</div>
</div>

问题是在我选择下拉菜单中的选项之一后，“员工特权”选项没有改变。

我在这里做错了什么？

【问题讨论】：

标签： mongodb twitter-bootstrap meteor

【解决方案1】：

你没有做错任何事。这是 Bootstrap 下拉菜单的正常行为，它通常用作导航菜单而不是值的输入。我认为bootstrap-select 会满足您的需求

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>


</head>

<body>

  <select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</body>

</html>

【讨论】：