TypeError: popper is null

Question

我的问题：当我单击下拉菜单时，我的控制台中出现一条错误消息：

我的树枝摘录：

<select class="tabledit-input form-control dropdown-toggle" data-toggle="dropdown" name="color" >
    {% for item in items %}
        <option value="{{ item.id }}" selected="">{{ item.Label }}</option>
    {% endfor %}
</select>
<button type="button" class="btn btn-success validbtn">Valid</button>

我检查了我的 package.json 和 app.js，一切正常。我读到它可能是 link 到 data-toggle="dropdown"。但我不知道错误在哪里。

我不知道它是否重要，但这个 select 在数据表的单元格中。

Answer 1

请不要将 dropdown 类与 select 标签一起使用，因为 select 和 dropdown 用于不同的原因。

select标签通常用于向后端发布一些数据，dropdown通常用于重定向。

如果您正在使用下拉菜单，请不要忘记添加 popper.js。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 2

当带有 data-toggle="dropdown" 的按钮不是 <div class="dropdown"> 元素的直接子元素时，我遇到了同样的错误。

解决方案是将其向上移动一级，即：

❌ 无效：

<div class="dropdown">
  <span>
    <button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  </span>
  <div class="dropdown-menu">
    <!-- items -->
  </div>
</div>

✔ 作品：

<div class="dropdown">
  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu">
    <!-- items -->
  </div>
</div>

TypeError: popper is null

TypeError: popper is null

bootstrap-4

popper.js