有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用bootstrap框架的一个下拉框搜索插件bootstrap-select。1、引入插件2、使用请选择简忆工具箱3、数据清空
有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用bootstrap框架的一个下拉框搜索插件bootstrap-select。
1、引入插件
<link rel="stylesheet" href="/bootstrap3/css/bootstrap.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="L2Jvb3RzdHJhcDMvanMvYm9vdHN0cmFwLm1pbi5qcw=="></script>
<!-- bootstrap-select -->
<link rel="stylesheet" href="/bootstrap3/css/bootstrap-select.min.css">
<script src="L2Jvb3RzdHJhcDMvanMvYm9vdHN0cmFwLXNlbGVjdC5taW4uanM="></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搜索下拉框插件的使用方法
猜你喜欢
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- layui数据表格以及传数据方式 2022-12-13
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- vue keep-alive 2023-10-08
- jsPlumb+vue创建字段映射关系 2023-10-08
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- JS实现左侧菜单工具栏 2022-08-31
- 1 Vue - 简介 2023-10-08
- ajax实现输入提示效果 2023-02-14
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08