Select2的使用联动筛选框的一个例子

本文使用的select2版本为select2 4.0.2

数据库中的表格信息如下，month字段包含了年、月信息。使用select2插件作为筛选框,以年度和月份信息筛选表格数据。年度和月份这两个筛选框作为联动的筛选框。

HTML 筛选框部分

            <span class="c_lable" >年度</span> <select id="selectYear" class="form-control select2" placeholder=""></select><span class="c_lable" >月份</span> <select id="selectMonth" class="form-control select2" placeholder=""></select>

JavaScript部分

使用ajax获取到上述表格month列的数据，对数据进行处理。处理的数据放selectData中，selectData如下，其中key为年度，value为当前年度对应的可选月份。$("#selectYear").on("change",function(e){}）年度更新的时候，清空月份筛选框，重新赋值。

var selectData={};$(function(){//初始化选择框$.ajax({type:"get",url:"${ctx}/Table/MonthHistory/getSelect",dataType:"json",contentType:"application/json",success:function(data){var json =JSON.parse(data);//console.log(data);json.forEach(function(item,index){var y=item.split('.')[0];var m=item.split('.')[1];if(!selectData[y]){selectData[y]=[];selectData[y].push(m);}else{selectData[y].push(m);}});var keys = [];for (var p1 in selectData) {if (selectData.hasOwnProperty(p1))keys.push(p1);}$("#selectYear").select2({data: keys,placeholder:'请选择年度',language: "zh-CN",allowClear: true,width:'150px'});$("#selectMonth").select2({data:selectData[$("#selectYear").select2("data")[0].id],placeholder:'请选择月度',language: "zh-CN",allowClear: true,width:'150px'}) },error:function(data){console.log('筛选框获取数据出错啦！');}});//初始化表格initTable();
});//年度更新的时候
$("#selectYear").on("change",function(e)
{var arr=[];if($("#selectYear").select2("data").length!=0)arr=selectData[$("#selectYear").select2("data")[0].id];console.log(arr);//清空月份$("#selectMonth").select2().empty();$("#selectMonth").select2({data:arr,placeholder:'请选择月度',language: "zh-CN",allowClear: true,width:'150px'}) ;});

Select2的使用联动筛选框的一个例子相关推荐

PHP实现列表页综合筛选功能,dede织梦列表页联动筛选方法功能的实现
[DEDECMS.织梦开源程序已经成为市场上主流仿站开源代码,它能够非常快速的放置一个已经建立好的网站,但是前提是这些网站比较简单,没有一些复杂的功能,那么使用DEDECMS仿站是最快速,最有效的.而 ...
Android--- 筛选框需求（1）房产类APP条件筛选框，包含区域（单选，多选），竖着排列（单选，多选），横向排列（单选，多选）
房产类APP条件筛选框,包含区域(单选,多选),竖着排列(单选,多选),横向排列(单选,多选) 最近刚做完筛选框的需求,今天特地来总结下这个需求的点,跟细节由于我现在撸的APP是租房APP,他们里面 ...
NG-ZORRO表格多列联动筛选
NG-Zorro官方文档中只介绍了纯文本搜索的联动筛选以及单列的自定义筛选,业务需求中要用到不同状态的联动搜索(在前一个筛选条件基础上进行筛选),包括文本值搜索.日期搜索.多选框搜索.这里做一个简单的 ...
dedecms联动筛选_织梦联动筛选【多选版】
多选版效果多选就是一个属性选多次,如需一个属性选择一次,参考<织梦联动筛选[单选版]> 警告:操作之前先备份你的程序这2个文件. /include/arc.listview.class. ...
php多选筛选,织梦二次开发联动筛选(单选和多选)功能的实现
织梦dedecms二次开发联动筛选(单选和多选)功能的实现 . 首先我把单选的代码贴出来,这个是我参考其他网站的,多选也是基于这个单选修改的,所以如果要做多选的话,也请先把单选的这些代码配置好. 联动 ...
【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的...
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
织梦php开发tags功能开发,织梦全网最新联动筛选功能的实现（单选和多选）可显示分类的文章...
之前写过这篇文章<>下面二次开发织梦联动筛选是之前升级版,修复手机端无法加载_m.htm列表模板BUG: 首先需要说明的是这个功能需要在模板里面用到php标签,所以需要在后台模板引擎禁用标 ...
dedecms联动筛选_织梦dedecms联动筛选[伪静态版]
演示效果 dedecms织梦联动筛选[伪静态版],网站用的是静态,筛选用的是伪静态,筛选的伪静态地址以字段和键值呈现,让筛选URL与静态保持一致.如: 静态栏目页 https://www.123.co ...
dedecms联动筛选_织梦联动类别联动筛选搜索查询功能插件
用织梦做医院网站首页的症状导诊时候,需要用到织梦联动类别联动枚举结合织梦搜索查询实现查询数据.效果图如下: 症状和病情描述是后台联动类别管理里添加的一级.二级选择织梦联动类别搜索功能实现步骤: 具体 ...

Select2的使用联动筛选框的一个例子

Select2的使用联动筛选框的一个例子相关推荐

最新文章

热门文章

Select2的使用 联动筛选框的一个例子

Select2的使用 联动筛选框的一个例子相关推荐

最新文章

热门文章

Select2的使用联动筛选框的一个例子

Select2的使用联动筛选框的一个例子相关推荐