有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用bootstrap框架的一个下拉框搜索插件bootstrap-select。1、引入插件2、使用请选择简忆工具箱3、数据清空
有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用bootstrap框架的一个下拉框搜索插件bootstrap-select。
1、引入插件
<link rel="stylesheet" href="/bootstrap3/css/bootstrap.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/bootstrap3/js/bootstrap.min.js"></script>
<!-- bootstrap-select -->
<link rel="stylesheet" href="/bootstrap3/css/bootstrap-select.min.css">
<script src="/bootstrap3/js/bootstrap-select.min.js"></script>
2、使用
<select class="selectpicker show-tick form-control ctpEmpcode1" data-live-search="true" name="ctpEmpcodesssss">
<option value="">请选择</option>
<option value="编程学习网">编程学习网</option>
<option value="简忆工具箱">简忆工具箱</option>
</select>
3、数据清空选择
$('.selectpicker').selectpicker('val',(''));
4、附件下载(阿里网盘):https://www.aliyundrive.com/s/PyAMeHePMXU 提取码: 95su
沃梦达教程
本文标题为:bootstrap搜索下拉框插件的使用方法
基础教程推荐
猜你喜欢
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- vue的 Mixins (混入) 2023-10-08
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- Vue+WebSocket实现在线聊天 2023-10-08
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 第7天:CSS入门 2022-11-04