有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用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搜索下拉框插件的使用方法
基础教程推荐
猜你喜欢
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- this[] 指的是什么内容 讨论 2023-11-30
- 基于Vue制作组织架构树组件 2024-04-08
- CSS3的几个标签速记(推荐) 2024-04-07
- JS前端广告拦截实现原理解析 2024-04-22
- js禁止页面刷新与后退的方法 2024-01-08
- Ajax实现动态加载数据 2023-02-01
- 浅谈Vue2和Vue3的数据响应 2023-10-08
