基于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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
javascript中expression的用法整理
May 13 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
js窗口震动小程序分享
Nov 28 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
element中el-container容器与div布局区分详解
May 13 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开发负载均衡指南
2010/07/17 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
JS编程小常识很有用
2012/11/26 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python实现复制文件到指定目录
2019/10/16 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python 自动识别并连接串口的实现
2021/01/19 Python
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
行政助理岗位职责范文
2013/12/03 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript