有时我们用到下拉框,选项比较多的的情况下,我们就需要给他加个搜索功能了,我们可以使用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搜索下拉框插件的使用方法
基础教程推荐
猜你喜欢
- 【vue】三种获取input值的写法 2023-10-08
- ajax异步加载图片实例分析 2022-12-18
- html网页中使用希腊字母的方法 2022-09-21
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题 2022-10-17
- vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决 2023-07-09
- JavaScript函数this指向问题详解 2023-08-12
- JavaScript开发简单易懂的Svelte实现原理详解 2023-08-12
- Ajax实现关键字联想和自动补全功能及遇到坑 2023-02-23
- Ajax实现简单下拉选项效果【推荐】 2022-12-28
- AJAX实现数据的增删改查操作详解【java后台】 2023-02-23
