使用bootstrap实现下拉框搜索功能的实例讲解


Posted in Javascript onAugust 10, 2018

背景

公司的小二后台有一个下拉框选择经销商的功能,由于选择的经销商过多,因此添加搜索功能。

前提

配置好Bootstrap相关的开发环境

主要内容

<div class="form-group">
 <label class="col-sm-3 control-label" for="state">经销商信息</label>
 <div class="col-sm-3">
  <select name="dealer_id" id="dealer_id" class="selectpicker show-tick form-control" data-width="98%" data-first-option="false" title='请选择经销商(必选)' required data-live-search="true">
  <#foreach dealer in dealerList>
  <option value="${dealer.id?c}">${dealer.name!}</option>
  </#foreach>
  </select>
 </div>
</div>

其中最主要的是select标签中的两个属性: class=”selectpicker show-tick form-control” required data-live-search=”true” 。数据展示中foreach是模版引擎freemarker的循环遍历列表语句,当然测试时,您可以列几个option标签数据。

效果图:

使用bootstrap实现下拉框搜索功能的实例讲解

以上这篇使用bootstrap实现下拉框搜索功能的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
jquery获取tagName再进行判断
May 29 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Node.js中sequelize时区的配置方法
Dec 10 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 #Javascript
bootstrap下拉框动态赋值方法
Aug 10 #Javascript
layui实现点击按钮给table添加一行
Aug 10 #Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 #Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 #Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 #Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 #Javascript
You might like
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
详解JavaScript树结构
2017/01/09 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
mpvue跳转页面及注意事项
2018/08/03 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
如何测量vue应用运行时的性能
2019/06/21 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python和c语言哪个更适合初学者
2020/06/22 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
值传递还是引用传递
2015/02/08 面试题
毕业生物理教师求职信
2013/10/17 职场文书
小学教研工作制度
2014/01/15 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis