开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

boot strap中的下拉列表不工作-显示控制台中需要的popper.js

在boot strap中，下拉列表不工作并显示控制台中需要的popper.js的问题可能是由于以下原因导致的：

缺少popper.js库：popper.js是一个用于处理弹出框和下拉列表等浮动元素位置的JavaScript库。在使用boot strap的下拉列表时，需要引入popper.js库。你可以通过在HTML文件中添加以下代码来引入popper.js库：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

引入顺序错误：在引入boot strap和popper.js库时，需要确保它们的引入顺序正确。通常情况下，应先引入boot strap的CSS文件，然后再引入popper.js库，最后引入boot strap的JavaScript文件。例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>

JavaScript冲突：如果页面中已经引入了其他的JavaScript库或代码，可能会导致与boot strap和popper.js之间的冲突。你可以尝试将其他的JavaScript代码注释掉，然后再测试下拉列表是否正常工作。
HTML结构错误：下拉列表的HTML结构必须符合boot strap的要求。确保下拉列表的父元素具有dropdown类，并且下拉列表本身具有dropdown-menu类。例如：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉列表
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

如果以上方法都无法解决问题，可能需要进一步检查浏览器控制台中的错误信息，以便更好地定位问题所在。

相关搜索:我的JS在codepen中不工作，但在控制台中工作得很好。如何在mvc中填充数据库中的下拉列表？需要在下拉列表中显示数据库中的名称我的api post请求在postman工具中工作，但在浏览器的控制台中显示错误？我无法从promise object获取下拉列表中的数据，它在控制台响应中显示数据。角度承诺如何在不创建查询的情况下在查询选项卡中显示从(queryByWiql)检索的工作项列表使用基于文本的下拉列表的VBA和输入值在excel中隐藏或显示表格(而不是工作表)中的列和行。我已经在我的JS代码中编写了fadeOut命令，在我的待办事项列表项目中，但淡出不能正常工作，并在谷歌控制台中显示错误？我如何在我的下拉列表中获得一个年份列表，而不需要对它进行硬编码，以显示和使用我的“添加”按钮？腾讯云 oracle云腾讯云 pci dss

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Bootstrap4 食用摘记（非入门教程）

从官方教程的说明中可以看出用于Dropdown（下拉列表）组件以及Tooltips（提示框）/Popovers（弹出框）

03

如何将Thymeleaf技术集成到SpringBoot项目中

截至目前，不仅有了天气预报的API接口，也有了数据的缓存方案。现在，就要进行天气预报服务的实现，也就是说，这里需要一个面向用户的应用。这个应用应该拥有友好的界面，而不是一堆难以理解的数据。

01

Vue CLI3.0 中使用jQuery 和 Bootstrap

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。

02

前端入门24-响应式布局（BootStrap）声明正文-响应式布局（BootStrap）

BootStrap 目前已经出了 4 个版本，每个版本都有对应的官网教程，先来看看不同版本里的宣传语：

02

35 个最好用的 Vue 开源库！送与每一位开发者

无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成为家常便饭。所幸的是，随着 Vue.js 社区的不断壮大，每天都会出现一些很好的软件包。

01

2018年度 35 个最好用 Vue 开源库

在本文中，我们将推荐一些非常好用的 Vue 相关的开源项目。无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成为家常便饭。所幸的是，随着 Vue.js 和 Nuxt.js 社区的不断壮大，每天都会出现一些很好的开源框架和包。

00

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

在项目的前端开发中，对于绝大多数的小伙伴来说，当然，也包括我，不可避免的需要在项目中使用到一些第三方的组件包。这时，团队中的小伙伴是选择直接去组件的官网上下载，还是图省事直接在网上搜索，然后从一些来源不明的地方下载，我们就无法管控了。同时，我们添加的组件间可能存在各种依赖关系，如果我们没有正确下载引用的话，到最后可能还是无法正常使用。

03

Bootstrap入门

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

03

Python Django个人网站搭建4-配置使用 Bootstrap 4 并改写模板文件

作者： zifanwang 发布于2020-05-08

03

python测试开发django-155.bootbox使用(alert/confirm/prompt/dialog)

Bootbox.js是一个小型的JavaScript库，基于 Twitter 的 Bootstrap 开发，旨在使使用Bootstrap modals更容易！可以自定义alert/confirm/prompt/dialog弹出框

02

文件上传控件bootstrap-fileinput与Python交互

注意下面的原因，可能是和后端API交互不成功的原因 fileinput版本不正确，需要大于5.0 前端设置的name属性值和后端接收的属性值不一致必要的css和js文件请确保下面的js和css文件存在 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootst

02

文件上传控件bootstrap-fileinput与Python交互

[up-6108568931341e960672fcd7f8c2d51e57d.png] 注意下面的原因，可能是和后端API交互不成功的原因 fileinput版本不正确，需要大于5.0 前端设置的name属性值和后端接收的属性值不一致必要的css和js文件请确保下面的js和css文件存在 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="htt

03

BootStrap的一个标准框架的内容解释——来源于bootstrap官网

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-

05

Vue CLI 引入 bootstrap4

当前安装的是版本是 bootstrap@4.1.3 ,可能随着版本变化，应该会有所升级

02

如何在 React 中实现鼠标悬停显示文本？

在 React 应用中，当用户将鼠标悬停在某个元素上时，我们经常需要显示一些相关的文本，以提供额外的信息或交互提示。本文将详细介绍如何在 React 中实现鼠标悬停显示文本的功能，并提供示例代码帮助你理解和应用这个功能。

01

Bootstrap 4/3 页面基础模板与兼容旧版本浏览器

Bootstrap 3 与 4 差别很大，目录文件结构、所引入的内容也不同，这里说说一下 Bootstrap 引入的文件、网页模板和兼容性问题。本网站刚刚搭建好，正好发一下文章原来测试网站。

03

springboot开发之添加员工

点击新增跳转到添加员工界面，输入相关信息，注意，springboot默认使用的日期格式是：yyyy/MM/dd，即以“/” 进行分隔。点击添加：

02

响应式网页

安装react-bootstrap（react-bootstrap标签自定义，属性和bootstrap相同）

01

SpringBoot基础之banner玩法解析

SpringBoot项目启动时会在控制台打印一个默认的启动图案，这个图案就是我们要讲的banner。看似简单的banner，我们能够对它做些什么呢？本篇文章就带大家深入了解一下banner的使用（版本：SpringBoot2.1.4）。

02

springboot开发之显示员工信息

在entities包中：有Employee.java、Department.java

03

pycharm入门教程(非常详细)_pycharm的用法

在Project Tool Window中，单击Alt+Insert。然后，在出现的弹出菜单上，选择Jupyter Notebook选项并输入文件名（此处为MatplotlibExample.ipynb）。

04

66. Vue 结合webpack使用jquery以及boostrap

有时候在 Vue 框架开发的时候，还是存在需要使用 jquery 以及 boostrap 的场景的，这个时候就需要安装 Jquery 以及 boostrap 了。

02

Bootstrap3和4模板

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/161537.html原文链接：https://javaforall.cn

01

使用 Spring Boot 从数据库实现动态下拉菜单

动态下拉菜单（或依赖下拉菜单）的概念对于编码来说是令人兴奋且具有挑战性的。动态下拉列表意味着一个下拉列表中的值取决于前一个下拉列表中选择的值。一个简单的示例是三个下拉框，显示区、taluk 和村庄的名称，其中 taluk 中的值取决于区中选择的值，村庄中的值取决于 taluk 下拉列表中选择的值。动态下拉可以使用以下技术来实现：

05

sublime--package control的配置与插件安装

自动配置：　　准备一个安装好的 sublime text 。这里我的是版本3；　　1. 快捷键：ctrl + ~；调出控制台，因为我的是版本3，所以在控制台中输入下边这段代码： 1 import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublim

09

JQuery Deferred对象使用小结

如下，打开页面时，获取默认选中的项目，同时也会初始化Combobox下拉框下拉列表数据

03

使用Google翻译Api

将环境变量GOOGLE_APPLICATION_CREDENTIALS设置为包含服务帐户密钥的JSON文件的文件路径。在Linux或macOS系统中设置方法如下：

03

第3章 WEB03- JS篇-视频教程-第二部分

在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出.

02

jquery.HooRay——自己做的一个jquery常用工具插件

本插件基本算原创，其中大多数功能是在之前工作中发现经常会使用到的，但使用他人的插件放一起用会出现冲突，或者某个插件不能兼容各个浏览器，于是本人对一些插件进行修改或重写，也有些优秀的插件原封不动的整合进来，但由于插件开源共享，所以没有写明插件的来源地址以及作者信息，望见谅。

02

AngularDart Material Design 下拉列表顶

material-dropdown-select组件结合了material-select和material-button-down的API。

02

Confluence 6 配置日志原

我们推荐你根据你的需求来配置你自己的 Confluence 日志。你可以有下面 2 种方法来修改你的日志：

02

前端开发如何做新手引导

通常，在产品发布新版本或者有新功能上线时，都会开发一个新手引导功能来引导用户了解应用的功能。在前端开发中，如何快速地开发新手引导功能呢，下面介绍几个开箱即用的新手引导组件库。

03

【自然框架】n级下拉列表框的原理

其实原理也很简单，分成两个部分，一个是服务器端，一个是客户端。　　首先要设置记录集，这里用DataSet来装载，二级联动，里面就要有两个DataTable；三级联动，里面就要有三个DataTable。同理，n级联动就要有n个DataTable。　　然后用第一个DataTable来绑定第一个DropDownList。第一个DropDownList是固定生成的，其他的DropDownList则是根据级数动态new出来的。　　服务器端会根据联动级数来动态创建下拉列表框。就是这样：lst = new My

07

AngularDart Material Design 选择顶

可以手动（在模板中）或通过SelectionOptions实例指定选项。可以通过模板或通过检查选择模型将选项标记为已选择。

02

BuildAdmin10：ElementPlus的弹出框，真的用不了

我们在使用浏览器（例如chrome），或者一些IDE时，我们总会打开很多标签页，所以chrome和IDE提供了关闭所有、关闭右侧、关闭其他等批量关闭功能。

00

使用VUE组件创建SpreadJS自定义单元格(一)

作为近五年都冲在热门框架排行榜首的Vue，大家一定会学到的一部分就是组件的使用。前端开发的模块化，可以让代码逻辑更加简单清晰，项目的扩展性大大加强。对于Vue而言，模块化的体现集中在组件之上，以组件为单位实现模块化。

02

【最佳实践】巡检项：云数据库（MongoDB）实例到期

该巡检项会检查 Mongo DB实例的到期情况，若腾讯云数据库的付费类型为包年包月，未配置自动续费且即将到期，则会触发该隐患的通知。实例过期后可能会导致业务访问受损。

06

响应式网页bootstrap

相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能

03

Cloudera Manager主机管理

您可以查看有关由Cloudera Manager管理的主机的摘要信息。您可以查看所有主机，集群中的主机或单个主机的信息。

01

如何实现前端新手引导功能？

大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信 lxchuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。

06

UGUI系列-Dropdown控件研究(Unity3D)

Dropdown下拉列表，控件还是很强大的，做UI的时候用的比较多，现在就将Dropdown使用中的一些经验总结起来，分享给大家了

04

Salesforce全局选项列表（Global Picklist）介绍

在Salesforce IdeaExchange中一个投票比较多的Idea就是能够创建一个可多个对象共享的下拉列表。

02

vue脚手架基础demo1

【table-striped】【table-bordered】【table-hover】【table-condensed】

02

python web开发网络编程 HTTP协议、Web服务器、WSGI接口

注：由于 HTML 里面写了很多下载的 css 文件地址，路径总是报错，最后还是建议引用 CDN 写法，相关库地址查询https://www.bootcdn.cn/

01

用这个库 3 分钟实现让你满意的表格功能：Bootstrap-Table

这是 HelloGitHub 推出的《讲解开源项目》[1]系列，今天给大家推荐一个基于 Bootstrap 和 jQuery 的表格插件：Bootstrap-Table

03

js多级联动示例（省份和城市二级联动)

本文描述的省份和城市二级联动下拉菜单，在js部分设置省份和城市信息，当然也可以将数据保存在数据库中，当需要使用的时候在读取。这里用的是js原生代码在html文件中设置省份、城市下拉列表如下： <select id="pro" onchange="addCity();"></select> <select id="city"></select> 在js中设置省份信息代码如下： var province=["北京","上海","广东","江苏","浙江","重庆","安徽","福建","甘肃","广西", "

05

【十四】springboot整合WebSocket

介绍：接下来我会把学习阶段学到的框架等知识点进行整合，每一次整合是在前一章的基础上进行的，所以后面的整合不会重复放前面的代码。每次的demo我放在结尾，本次是接着上一章的内容延续的，只增加新增的或者修改的代码。

01

html学习笔记（一）

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

05

实时音视频开发学习3 - 实现web端跑通知识储备

本节内容主要讲解如何快速使用SDK包，SDK集成方式，SDK目录结构解释以及在web端和小程序端进行跑通。

02

pycharm如何调试代码_pycharm怎么分段运行代码

（2）已经创建了一个python工程并且添加了内容，具体参考： Getting Started tutorial

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭