时间戳

首页 > 解决方案 > 类型错误：popper 为空

bootstrap-4 - 类型错误：popper 为空

问题描述

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

在此处输入图像描述

我的树枝的摘录： 

<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-4popper.js

解决方案

请不要因为两者而使用dropdown带有select标签的类，并且出于不同的原因使用。selectdropdown

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>

推荐阅读