基于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如何把参数列严格转换成数组实现思路
Apr 01 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python List cmp()知识点总结
2019/02/18 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Python datetime模块使用方法小结
2020/06/18 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
大学生的网上创业计划书
2013/12/31 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
电台实习生求职信
2014/02/25 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
小学生环保演讲稿
2014/04/25 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
经营场所使用证明
2015/06/19 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL