Bootstrap使用bootstrap-select的坑[记录]

已于 2022-03-17 16:23:00 修改
阅读量2.4k 收藏 4
点赞数 2
文章标签： bootstrap javascript html
于 2022-03-15 19:20:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50254764/article/details/123509079
版权
在使用Bootstrap4.6.1和bootstrap-select.js1.13.9时遇到多选下拉框样式正常但选项无法显示的问题。解决方法包括确保引入jQuery 1.9+、bootstrap.css、dropdown.js，对于Bootstrap 4.0+版本，还需引入Popper.js。根据官方文档和博客建议进行调整。
摘要由CSDN通过智能技术生成

Bootstrap使用bootstrap-select的坑[记录]

我的文件版本

1、jQuery：3.6.0
2、Bootstrap：4.6.1
3、bootstrap-select.js：1.13.9

问题

1、多选下拉框的样式已经显，但是呢，下拉选项不显示，点击下拉框也没有反应。Chrome也没有错误信息。如下图
点击无反应
无错误信息

解决方法： 根据bootstrap-select官网描述，使用下拉框插件，必须引入jQueru-1.9+、bootstrap.css、bootstrap的dropdown.js(引入bootstrap.min.js和bootstrap.js就可以)。
还有一点，如果使用的bootstrap-4.0+版本，那么还需要引入Popper.js(以下)

最低0.47元/天 解锁文章
Wu_1024
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Bootstrap下拉框插件bootstrap-select使用方法详解
10-18
主要为大家详细介绍了基于Bootstrap下拉框插件bootstrap-select的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap-select-1.13.14
06-05
以上就是关于 Bootstrap Select 1.13.14 版本的基本介绍，它为开发者提供了一个强大且易于使用的下拉选择解决方案，让网站和应用的界面更加专业和友好。通过深入学习和利用其丰富的功能，你可以创建出更加互动和吸引...
Bootstrap Select - 增强Bootstrap下拉选择框的插件
gitblog_00065的博客
03-17 674
Bootstrap Select - 增强Bootstrap下拉选择框的插件 Bootstrap Select 是一个基于 Bootstrap 的增强版下拉选择框插件，可以为原生 HTML select 标签提供丰富的定制选项和交互功能。 什么是 Bootstrap Select？ Bootstrap Select 是一个轻量级的 JavaScript 插件，它可以将标准的 HTML sel...
bootstrap下拉列表多选组件_booterstrip多选
最新发布
code8889的博客
05-15 1542
正文和，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种bootstrap mutiselect组件，界面渲染效果略差；再比如select2一些兼容性问题、多选的取值赋值等问题都困扰着博主以及很多园友，项目里面的下拉框很早就替换为今天介绍的这款组件，所以今天介绍给大家，让大家多一个选择也好！说点题外话。
bootstrap-select 下拉多选
thankszmy的博客
11-23 228
bootstrap-select 下拉多选，真的好用
bootstrap-select 下拉多选 重置刷新下拉选项
test
04-26 3453
js中其他事件相关的代码中，使用jquery通过控件id设置selectpicker属性值为refresh进行重置刷新 function doReset() { //对id为elementID的下拉框进行重置刷新 $("#elementID").selectpicker('refresh'); } 或者： 参考https://bl...
使用bootstrap 的下拉菜单实现select的下拉复选框多选
zyb112211的博客
04-20 5850
CSS代码:/*多选下拉框样式（根据自己的样式调整）*/ .dropdown_item{width: 100%} .dropdown_item>li:HOVER{background-color: #eee;cursor: pointer;} .dropdown_item>li {display: block;padding: 3px 10px;clear: both;font-wei...
bootstrap-select 动态数据下拉复选框 初使用
trouble is a friend
12-05 1821
使用情景就是先前博客中的 easyui 下拉框用在项目框架，导致页面冲突，所以不得不又去寻找 基于bootstrap的下拉复选框，于是我在网上找到了 bootstrap-select。 言归正传，这是资源的地址：https://download.csdn.net/download/qq_25221835/10830026 大家可以在这个地址下载，或者百度其他地址。 首先看一下效果： ...
扩展Bootstrap-table插件使其支持通过下拉框快速跳转至任意页数
lhtzbj12的专栏
08-14 8367
前言最近项目使用的Metronic前面框架，表格插件采用bootstrap-table V1.11.1（http://bootstrap-table.wenzhixin.net.cn/zh-cn/），是一款功能强大的表格插件，非常适合在后台管理系统里使用。在此感谢作者将插件开源（https://github.com/wenzhixin/bootstrap-table/）。 项目中需求，当数据总页数
bootstrap-select使用示例.rar
04-14
这个压缩包“bootstrap-select使用示例.rar”包含了使用该插件的具体代码实例，供开发者参考和学习。 首先，让我们了解一下`bootstrap-select`的基本用法。在HTML中，你需要将普通的`<select>`元素与`<option>`子...
bootstrapValidator bootstrap-select验证不可用的解决办法
08-31
然而，在使用Bootstrap-select多选下拉框时，我们可能会遇到验证失效的情况。这是因为BootstrapValidator默认不会验证隐藏或禁用的组件，其中包括隐藏的input元素。为了解决这个问题，我们可以按照以下三个步骤进行...
bootstrap-selectv1.12.4.zip
04-22
使用 Bootstrap Select，开发者可以轻松实现以下功能： 1. **多选**：允许用户选择多个选项。 2. **分组**：将选项按组分类，方便用户浏览。 3. **搜索过滤**：在大型选项列表中提供搜索框，帮助用户快速找到所需...
selectpicker下拉框在克隆后出现重复问题解决
HelloWorld, GraspWorld!
10-24 2718
用selectpicker插件做下拉框可以自带一个搜索栏及其方法，但是在克隆这个下拉框时，在控件的地方会多出来一个从上一个下拉框复制又封装而成的按钮，需要将其删除 在克隆行的时候添加如下三行即可 $('.selectpicker').data('selectpicker', null); $('.bootstrap-select').find(&quot;button:first&quot;).remove(); ...
Bootstrap-Select问题
Vin Cente
08-10 358
项目场景： 项目引用的JQuery版本为：3.6.0 项目引用的Bootstrap版本为：3.4.1 下载的Bootstrap-Table版本为：1.8.1 下载的Bootstrap-Table-Edit版本为：1.0 下载的Bootstrap-Select版本为：1.0 下载的Bootstrap-DateTimePicker版本为：2.0 下载链接： 问题描述： 弹出下拉列表后，选中的源数据的背景颜色为黄色。 弹出下拉列表后，源数据有padding-left:17px属性。 选择数据
bootstrap-select使用过程中的一些问题
幽篁晓筑的博客
07-07 1654
这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了，网上有很多例子。 地址： 官方插件地址：https://developer.snapappointments.com/bootstrap-select GitHub地址：https://github.com/snapappointments/bo...
html 中下拉选怎么重置,ruoyi bootstrap-select 下拉多选取值及重置
weixin_42144707的博客
06-02 951
html:这里的下拉列表数据从若依字典里取值渠道：th:value="${dict.dictValue}">搜索重置js声明两个方法：提交时获取多选数据，重置时重置多选下拉框function doSubmit(){var str=[];$("#channels option:selected").each(function () {str.push($(this).val());// 收...
Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
qq_53679247的博客
10-21 4164
我们不能同时引入这两个js只能引入其一，同时引入会使得部分功能失效。两个js文件冲突/没有引入指定的js文件。注意我们使用下拉菜单时使用的js是这个。文件名 index.html。文件名index.css。
Bootstrap下拉单选框，下拉搜索多选框Bootstrap-select
藏经阁
12-05 5670
下面给大家介绍一款集下拉搜索多选框，下拉单选框与一体的bootstrap组件Bootstrap-select，bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能，多选功能，搜索功能，自定义内容和图标等多种功能，非常强大。实现效果如下。 一、使用方法 在页面中引入jquery和bootstrap相关文件，以及boots...
bootstarp-select(1)：bootstarp-select基本使用
weixin_38357164的博客
05-28 480
1、引入文件，首先引入jquery和bootstarp的依赖文件，再接着引入bootstrap-select <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.c
bootstrapvalidator bootstrap-select.js
12-16
bootstrapvalidator和bootstrap-select.js都是基于Bootstrap框架的库，用于增强表单验证和下拉菜单功能。 bootstrapvalidator是一个用于表单验证的jQuery插件，通过在表单元素上应用不同的验证规则和提示信息，可以实现对表单输入内容的实时验证。它支持常见的验证规则，如必填项、邮箱格式、数字格式、长度限制等，同时可以自定义验证规则和提示信息。通过bootstrapvalidator，可以有效地提升表单的用户体验和数据的准确性。 bootstrap-select.js是一个用于美化下拉菜单的jQuery插件，它可以让普通的下拉菜单变得更加美观和易用。通过bootstrap-select.js，可以对下拉菜单进行样式定制、搜索功能增强、多选功能支持等，同时还可以通过插件提供的API进行事件绑定和动态操作。这样可以让页面上的下拉菜单更加符合用户的需求和设计的风格。 综上所述，bootstrapvalidator和bootstrap-select.js是两个非常实用的基于Bootstrap框架的库，分别用于表单验证和下拉菜单增强。它们可以帮助开发者快速实现功能需求，提升用户体验和页面的美观性，是在Web开发中非常值得推荐使用的工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值