个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章bootstrap实现多个下拉框同时搜索的实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、第一个下拉框代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< 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、第二个下拉框代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
< 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 参数整理） 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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部分代码（接收参数，然后过滤器根据参数得到想要的结果） 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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实现多个下拉框同时搜索的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

最后此篇关于bootstrap实现多个下拉框同时搜索的实例的文章就讲到这里了,如果你想了解更多关于bootstrap实现多个下拉框同时搜索的实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Java中让界面内的时间及时更新示例代码
文章推荐： mac系统OS X10.10版本安装最新5.7.9mysql的方法
文章推荐： Mybatis Plus 字段为空值时执行更新方法未更新解决方案
文章推荐： python 递归遍历文件夹,并打印满足条件的文件路径实例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com