使用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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
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
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP _construct()函数讲解
2019/02/03 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
深入理解python try异常处理机制
2016/06/01 Python
python 中random模块的常用方法总结
2017/07/08 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python opencv读mp4视频的实例
2018/12/07 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python进度条的制作代码实例
2019/08/31 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python解析多层json操作示例
2019/12/30 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
python SOCKET编程基础入门
2021/02/27 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
幼儿教师国培感言
2014/02/19 职场文书
绩效工资实施方案
2014/03/15 职场文书
会议主持词
2014/03/17 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
创业计划书之美甲店
2019/09/20 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
redis lua限流算法实现示例
2022/07/15 Redis