Question

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

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

问题是，在我选择下拉菜单中的一个选项后，“员工权限”选项不会改变。

我在这里做错了什么？

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

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

1 个答案: