bootstrap实现多个下拉框同时搜索的实例

  • 更新时间:2022-10-17 09:10:19
  • 编辑:郭颖初

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"  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"  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);

以上这篇bootstrap实现多个下拉框同时搜索的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

相关教程

  • java不允许类多重继承却允许接口多重继承的原因

    这篇文章主要介绍了java为什么不允许类多重继承却允许接口多重继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起

    发布时间:2021-05-22

  • Java Unsafe类实现原理及测试代码

    这篇文章主要介绍了Java Unsafe类实现原理及测试代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    发布时间:2021-04-08

  • java读取简单excel通用工具类的实例内容

    这篇文章主要为大家详细介绍了java读取简单excel通用工具类,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2021-06-08

  • Java中闭包实例

    这篇文章主要介绍了Java中闭包简单代码示例,具有一定借鉴价值,需要的朋友可以参考下

    发布时间:2020-01-28

  • java如何连接并访问activemq

    这篇文章主要介绍了java怎么连接并访问activemq,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    发布时间:2020-01-11

  • 如何实现Java日期时间格式转换

    这篇文章主要为大家详细介绍了Java日期时间,以及日期相互转换的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-01-14

  • Java中通过Class类获取Class对象的实例方法

    这篇文章主要给大家介绍了关于Java中通过Class类获取Class对象的方法,文中通过示例代码介绍的非常详细,对大家学习或者使用java具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学

    发布时间:2019-09-07

  • java异常与处理机制分析

    这篇文章主要介绍了java的异常与处理机制,结合实例形式分析了Java异常与处理机制的概念、原理、相关操作技巧与注意事项,并附带面试题分析供大家参考,需要的朋友可以参考下

    发布时间:2019-08-11

  • Java使用ffmpeg和mencoder实现视频转码

    为网友们分享了关于Java的教程,这篇文章主要为大家详细介绍了Java使用ffmpeg和mencoder实现视频转码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2022-08-01

用户留言