js前端 多条件筛选查询
一、前言
在做项目中,遇到多条件筛选案例。实现完成以后,我将我做的代码分享在这里,希望可以帮助到其他朋友。
二、效果截图
三、实现代码
首先我先类型、类别、职位分成三块来处理,如果传到服务器端的话,就是三个参数。
html部分:
<form action="@Url.Action()" method="get" id="formAction"> <div class="type-table"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td>类型:</td> <td><span data-cate="all" data-type="type" class="active">全部</span> <span data-cate="qz" data-type="qz">全职</span> <span data-cate="jz" data-type="jz">兼职</span></td> </tr> <tr style="display:none;" id="qtqzNone"></tr> <tr style="display:none" id="qtqz"> <td>类别:</td> <td><span data-cate="all" data-category="category" class="active">全部</span> <span data-cate="mrmf" data-category="mrmf">美容/美发</span> <span data-cate="bmys" data-category="bmys">保姆/月嫂</span> <span data-cate="dnit" data-category="dnit">电脑/IT</span> <span data-cate="bgwy" data-category="bgwy">办公文员</span> <span data-cate="zsyl" data-category="zsyl">诊所医疗</span> <span data-cate="yyy" data-category="yyy">营业员</span> <span data-cate="mj" data-category="mj">美甲</span> <span data-cate="sj" data-category="sj">司机</span> <span data-cate="yc" data-category="yc">衣产</span> <span data-cate="jbktv" data-category="jbktv">酒吧/KTV</span> <span data-cate="zx" data-category="zx">装修</span> <span data-cate="qt" data-category="qt">其他</span> </td> </tr> <tr style="display:none;" id="cyqzCate"> <td>类别:</td> <td><span data-cate="all" data-category="category" class="active">全部</span> <span data-cate="zc" data-category="zc">中餐</span> <span data-cate="rc" data-category="rc">日餐</span> <span data-cate="fqg" data-category="fqg">夫妻工</span> <span data-cate="qtcy" data-category="qtcy">其他餐饮</span></td> </tr> <tr style="display:none;" id="cyqzCates"> <td>职位:</td> <td><span data-cate="jl" data-position="jl">经理</span> <span data-cate="jdh" data-position="jdh">接电话</span> <span data-cate="qt" data-position="qt">企台</span> <span data-cate="dbdw" data-position="dbdw">打包/带位</span> <span data-cate="kt" data-position="kt">看台</span> <span data-cate="dc" data-position="dc">大厨</span> <span data-cate="cg" data-position="cg">炒锅</span> <span data-cate="bc" data-position="bc">帮炒</span> <span data-cate="dz" data-position="dz">打杂</span> <span data-cate="yg" data-position="yg">油锅</span> <span data-cate="sc" data-position="sc">送餐</span> <span data-cate="qt" data-position="qt">其他</span></td> </tr> </table> </div> <div class="search"> <input type="hidden" name="cateId" value="@Request.QueryString["cateId"]" /> <input type="text" name="filter" value="@Request.QueryString["filter"]" placeholder="请输入关键字" /> <input type="hidden" name="posParam" id="posParam" value="@Request.QueryString["posParam"]" /> <input type="hidden" name="cateParam" id="cateParam" value="@Request.QueryString["cateParam"]" /> <input type="hidden" name="typeParam" id="typeParam" value="@Request.QueryString["typeParam"]" /> <button type="submit">搜索</button> </div> <div class="area"> 区域:<select id="AreaIds" name="AreaIds"></select> <input id="areaId" name="areaId" type="hidden" value="@Request.QueryString["areaId"]" /> </div> </form>
js部分:
$(function () { /**类型 */ var typeParam = []; /**类别*/ var cateParam = []; /**职位 */ var posParam = []; /**回填选中项*/ /*这里我说明一下:这里是我们已经提交了参数,在从浏览器的 url 获取参数,通 data-type 来回填该选项是否是选中*/ var param = getUrlParam(); if (param && param.typeParam) { typeParam = param.typeParam.split('A'); for (var i = 0; i < typeParam.length; i++) { $('[data-type="' + typeParam[i] + '"]').addClass('active'); } $('[data-type="type"]').removeClass('active'); } if (param && param.cateParam) { cateParam = param.cateParam.split('A'); for (var i = 0; i < cateParam.length; i++) { $('[data-category="' + cateParam[i] + '"]').addClass('active'); } $('[data-category="category"]').removeClass('active'); } if (param && param.posParam) { posParam = param.posParam.split('A'); for (var i = 0; i < posParam.length; i++) { $('[data-position="' + posParam[i] + '"]').addClass('active'); } } /* 到这里 回填结束 */
/** 这里是选线的点击事件 **/ $(".type-table span").click(function () { var me = $(this); var type = me.attr('data-type'); var category = me.attr('data-category'); var position = me.attr('data-position'); var className = me.attr("class"); var cate = me.attr('data-cate'); /*类型判断*/ if (type != undefined) { if (type == "type") { $('.type-table [data-cate]').removeClass('active'); typeParam = []; } else { $('[data-type="type"]').removeClass('active'); if (className == 'active') { if (typeParam.indexOf(cate) > -1) typeParam.remove(cate); } else { if (typeParam.indexOf(cate) == -1) typeParam.push(cate); } } $("#typeParam").val(typeParam.toString().replace(re, "A")); } /*类别判断*/ if (category != undefined) { if (category == "category") { $('.type-table [data-category]').removeClass('active'); cateParam = []; } else { $('[data-category="category"]').removeClass('active'); if (className == 'active') { if (cateParam.indexOf(cate) > -1) cateParam.remove(cate); } else { if (cateParam.indexOf(cate) == -1) cateParam.push(cate); } } $("#cateParam").val(cateParam.toString().replace(re, "A")); } /*职位判断*/ if (position != undefined) { if (className == 'active') { if (posParam.indexOf(cate) > -1) posParam.remove(cate); } else { if (posParam.indexOf(cate) == -1) posParam.push(cate); } $("#posParam").val(posParam.toString().replace(re, "A")); } /************ 选项卡点击事件结束 ****************/ if (className == 'active') { me.removeClass("active"); } else { me.addClass("active"); } var re = new RegExp(",", "g"); //定义正则表达式 这里是我用来分隔参数用的 if (typeParam.length > 0) { $("#typeParam").val(typeParam.toString().replace(re, "A")); } if (cateParam.length > 0) { $("#cateParam").val(cateParam.toString().replace(re, "A")); } if (posParam.length > 0) { $("#posParam").val(posParam.toString().replace(re, "A")); } }); }); Array.prototype.indexOf = function (val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } };
附件 getUrlParam() 方法实现代码:主要是获取 URL 中参数的 Key 和 value
/** * 获取浏览器参数 * @param {any} url */ function getUrlParam(url) { var queryArr = (url && url.substr(url.indexOf('?') + 1).split('&')) || location.search.substr(1).split('&'), query = {}; for (var i = 0, len = queryArr.length; i < len; i++) { var key = queryArr[i].split('=')[0], val = queryArr[i].split('=')[1]; if (query.hasOwnProperty(key)) { if (!Array.isArray(query[key])) { query[key] = [query[key]] query[key].push(val) } else { query[key].push(val) } continue } query[key] = val } return query }
四、结语
分享到这里结束,可能代码有点多不好看懂。不过没关系,有不懂的地方可以联系我,我们一起学习一起进步!
作者:幸福摩天轮
------------------------------------------------
愿今日之努力日后想起还能浅浅一笑,不愿今日之颓废用长长一生去悔恨!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
分类:
Jquery 使用
, JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~