类型错误：popper 为空答案

【问题标题】：TypeError: popper is null类型错误：popper 为空
【发布时间】：2020-06-21 05:16:04
【问题描述】：

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

我的树枝摘录：

<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，一切正常。我读过它可能链接到 data-toggle="dropdown"。但我不知道错误在哪里。

我不知道这是否重要，但此选择位于数据表的单元格中。

【问题讨论】：

标签： bootstrap-4 popper.js

【解决方案1】：

请不要使用带有select 标签的dropdown 类，因为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>

【讨论】：

【解决方案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>

【讨论】：