基于bootstrap实现多个下拉框同时搜索功能


Posted in Javascript onJuly 19, 2017

本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下

1.第一个下拉框代码

<div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> 
       <!--快速查询-->
       <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
        <select data-filter-type="2" name="copyfrom" class="form-control select2" data-validate="notempty" style="visibility: hidden;" data-field="name" data-placeholder="搜索数据资源">
         <option value="">请选择数据资源</option>
         <optgroup label="UNESCO二类中心">
          <#list data.copyfromList as entity>
          <#if (entity.type?? && entity.type == '1')>
          <option value="${entity.alias!}" <#if (param.copyfrom?? && param.copyfrom == entity.alias)>selected</#if>>${entity.alias!}</option>
          </#if>
          </#list>
         </optgroup>
         <optgroup label="科技动态与进展">
          <#list data.copyfromList as entity>
          <#if (entity.type?? && entity.type == '7')>
          <option value="${entity.alias!}" <#if (param.copyfrom?? && param.copyfrom == entity.alias)>selected</#if>>${entity.alias!}</option>
          </#if>
          </#list>
         </optgroup>
         <optgroup label="其他">
          <#list data.copyfromList as entity>
          <#if (entity.type?? && entity.type == '8')>
          <option value="${entity.alias!}" <#if (param.copyfrom?? && param.copyfrom == entity.alias)>selected</#if>>${entity.alias!}</option>
          </#if>
          </#list>
         </optgroup>
        </select>
       </div>
      </div>

2.第二个下拉框代码

<div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> 
       <!--快速查询-->
       <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
        <select data-filter-type="2" name="cid" class="form-control select2" data-validate="notempty" style="visibility: hidden;" data-field="name" data-placeholder="搜索栏目名称">
         <option value=""></option>
         <#list data.categories as entity>
         <option value="${entity.id}" <#if (param.cid?? && param.cid == entity.id)>selected</#if>>${entity.id} - ${entity.name}</option>
         </#list>
        </select>
       </div>
      </div>

3.后台js代码(url 参数整理)

bindEvents:function(){

var self = this, dom = self.element;


$('select[name="copyfrom"]', dom).change(function(event){


self.params.copyfrom = $(this).val();


var url = self.formatParams(self.params);


window.location.href = "cekasp_article.htm" + url;

});



$('select[name="cid"]', dom).change(function(event){


self.params.cid = $(this).val();


var url = self.formatParams(self.params);


window.location.href = "cekasp_article.htm" + url;

});

 }


formatParams:function(params){


var self = this;


var url = "";


for(var param in params){


if(params[param]){



url += param + "=" + params[param] + "&";


}

}


if(url.length > 0){



url = "?" + url.substring(0,url.length-1);

}


return url;

}

 4.后台java部分代码(接收参数,然后过滤器根据参数得到想要的结果)

 String categoryId = request.optString("cid");
if (!ValidateUtil.isNull(categoryId)) {

// 加载栏目信息
  
JSONObject jsonCategory = toJSONObject(adminService.loadById(CekaspCategory.class, categoryId));


response.put("category", jsonCategory);


param.addFilter("id", FilterType.IN, articleIdList, 1);


}


String copyfrom = request.optString("copyfrom");

if (!ValidateUtil.isNull(copyfrom)) {


param.addFilter("copyfrom", FilterType.EQUALS, copyfrom);

  }

  List<CekaspArticle> articleList = adminService.list(CekaspArticle.class,param);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
JS中FormData类实现文件上传
Mar 27 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 #Javascript
JavaScript实现二维坐标点排序效果
Jul 18 #Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 #Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 #Javascript
深入解析Vue 组件命名那些事
Jul 18 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
简单介绍Python中的round()方法
2015/05/15 Python
python如何获取服务器硬件信息
2017/05/11 Python
Python3中详解fabfile的编写
2018/06/24 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Python生成器常见问题及解决方案
2020/03/21 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
为什么需要版本控制
2016/10/28 面试题
教师实习自我鉴定
2013/12/18 职场文书
培训研修方案
2014/06/06 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
村道德模范事迹材料
2014/08/28 职场文书
教师先进个人材料
2014/12/17 职场文书
离职信范文
2015/06/23 职场文书