有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用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搜索下拉框插件的使用方法


基础教程推荐
猜你喜欢
- 原生ajax瀑布流demo分享(必看篇) 2023-02-01
- Ajax提交表单并接收json实例代码 2023-02-13
- 在IE中为abbr标签加样式 2022-10-16
- AJax 把拿到的后台数据在页面中渲染的实例 2023-02-22
- 解决:layUI数据表格+简单查询 2022-12-16
- JavaScript垃圾回收机制(引用计数,标记清除,性能优 2022-08-31
- 纯javascript的ajax实现php异步提交表单的简单实例 2022-12-28
- 关于ajax异步访问数据的问题 2023-02-23
- Unicode中的常用字母小结 2022-09-21
- ajax实现数据分页查询 2023-01-31