基于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+xml自动生成表格的东西
Dec 21 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
JS继承定义与使用方法简单示例
Feb 19 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冒泡排序算法代码详细解读
2011/07/17 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP中cookie知识点学习
2018/05/06 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Python生成密码库功能示例
2017/05/23 Python
python 随机森林算法及其优化详解
2019/07/11 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
企业办公室主任岗位职责
2014/02/19 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
施工安全责任书范本
2014/07/24 职场文书
物理课外活动总结
2014/08/27 职场文书
企业授权委托书范本
2014/09/22 职场文书
离婚案件答辩状
2015/05/22 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript