基于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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
python对Excel的读取的示例代码
2020/02/14 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
数据库笔试题
2013/05/09 面试题
机修工岗位职责
2013/11/24 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
运动会报道稿大全
2015/07/23 职场文书
消防安全主题班会
2015/08/12 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技