https://www.cnblogs.com/gzbit-zxx/p/11444793.html
js前端 多条件筛选查询
一、前言
在做项目中，遇到多条件筛选案例。实现完成以后，我将我做的代码分享在这里，希望可以帮助到其他朋友。
二、效果截图
三、实现代码
首先我先类型、类别、职位分成三块来处理，如果传到服务器端的话，就是三个参数。
html部分：
<form action="@Url.Action()" method="get" id="formAction"><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="type-table"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">border</span><span style="color: rgba(0, 0, 255, 1)">="0"</span><span style="color: rgba(255, 0, 0, 1)"> cellspacing</span><span style="color: rgba(0, 0, 255, 1)">="0"</span><span style="color: rgba(255, 0, 0, 1)"> cellpadding</span><span style="color: rgba(0, 0, 255, 1)">="0"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>类型：<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="all"</span><span style="background-color: rgba(255, 255, 0, 1)"><span style="color: rgba(255, 0, 0, 1)"> data-type</span><span style="color: rgba(0, 0, 255, 1)">="type"</span></span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="active"</span><span style="color: rgba(0, 0, 255, 1)">></span>全部<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="qz"</span><span style="color: rgba(255, 0, 0, 1)"> data-type</span><span style="color: rgba(0, 0, 255, 1)">="qz"</span><span style="color: rgba(0, 0, 255, 1)">></span>全职<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="jz"</span><span style="color: rgba(255, 0, 0, 1)"> data-type</span><span style="color: rgba(0, 0, 255, 1)">="jz"</span><span style="color: rgba(0, 0, 255, 1)">></span>兼职<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="display:none;"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="qtqzNone"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="display:none"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="qtqz"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>类别：<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="all"</span><span style="background-color: rgba(255, 255, 0, 1)"><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="category"</span></span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="active"</span><span style="color: rgba(0, 0, 255, 1)">></span>全部<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="mrmf"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="mrmf"</span><span style="color: rgba(0, 0, 255, 1)">></span>美容/美发<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="bmys"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="bmys"</span><span style="color: rgba(0, 0, 255, 1)">></span>保姆/月嫂<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="dnit"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="dnit"</span><span style="color: rgba(0, 0, 255, 1)">></span>电脑/IT<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="bgwy"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="bgwy"</span><span style="color: rgba(0, 0, 255, 1)">></span>办公文员<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="zsyl"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="zsyl"</span><span style="color: rgba(0, 0, 255, 1)">></span>诊所医疗<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="yyy"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="yyy"</span><span style="color: rgba(0, 0, 255, 1)">></span>营业员<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="mj"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="mj"</span><span style="color: rgba(0, 0, 255, 1)">></span>美甲<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="sj"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="sj"</span><span style="color: rgba(0, 0, 255, 1)">></span>司机<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="yc"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="yc"</span><span style="color: rgba(0, 0, 255, 1)">></span>衣产<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="jbktv"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="jbktv"</span><span style="color: rgba(0, 0, 255, 1)">></span>酒吧/KTV<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="zx"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="zx"</span><span style="color: rgba(0, 0, 255, 1)">></span>装修<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="qt"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="qt"</span><span style="color: rgba(0, 0, 255, 1)">></span>其他<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="display:none;"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="cyqzCate"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>类别：<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="all"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="category"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="active"</span><span style="color: rgba(0, 0, 255, 1)">></span>全部<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="zc"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="zc"</span><span style="color: rgba(0, 0, 255, 1)">></span>中餐<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="rc"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="rc"</span><span style="color: rgba(0, 0, 255, 1)">></span>日餐<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="fqg"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="fqg"</span><span style="color: rgba(0, 0, 255, 1)">></span>夫妻工<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="qtcy"</span><span style="color: rgba(255, 0, 0, 1)"> data-category</span><span style="color: rgba(0, 0, 255, 1)">="qtcy"</span><span style="color: rgba(0, 0, 255, 1)">></span>其他餐饮<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="display:none;"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="cyqzCates"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>职位：<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="jl"</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 255, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="jl"</span><span style="color: rgba(0, 0, 255, 1)">></span>经理<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="jdh"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="jdh"</span><span style="color: rgba(0, 0, 255, 1)">></span>接电话<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="qt"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="qt"</span><span style="color: rgba(0, 0, 255, 1)">></span>企台<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="dbdw"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="dbdw"</span><span style="color: rgba(0, 0, 255, 1)">></span>打包/带位<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="kt"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="kt"</span><span style="color: rgba(0, 0, 255, 1)">></span>看台<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="dc"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="dc"</span><span style="color: rgba(0, 0, 255, 1)">></span>大厨<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="cg"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="cg"</span><span style="color: rgba(0, 0, 255, 1)">></span>炒锅<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="bc"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="bc"</span><span style="color: rgba(0, 0, 255, 1)">></span>帮炒<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="dz"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="dz"</span><span style="color: rgba(0, 0, 255, 1)">></span>打杂<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="yg"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="yg"</span><span style="color: rgba(0, 0, 255, 1)">></span>油锅<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="sc"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="sc"</span><span style="color: rgba(0, 0, 255, 1)">></span>送餐<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">data-cate</span><span style="color: rgba(0, 0, 255, 1)">="qt"</span><span style="color: rgba(255, 0, 0, 1)"> data-position</span><span style="color: rgba(0, 0, 255, 1)">="qt"</span><span style="color: rgba(0, 0, 255, 1)">></span>其他<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="search"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="hidden"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="cateId"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="@Request.QueryString["</span><span style="color: rgba(255, 0, 0, 1)">cateId"]" </span><span style="color: rgba(0, 0, 255, 1)">/></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="filter"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="@Request.QueryString["</span><span style="color: rgba(255, 0, 0, 1)">filter"]" placeholder</span><span style="color: rgba(0, 0, 255, 1)">="请输入关键字"</span> <span style="color: rgba(0, 0, 255, 1)">/></span><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><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="area"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"> 区域：</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">select </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="AreaIds"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="AreaIds"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">select</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="areaId"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="areaId"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="hidden"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="@Request.QueryString["</span><span style="color: rgba(255, 0, 0, 1)">areaId"]" </span><span style="color: rgba(0, 0, 255, 1)">/></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
js部分：
$(function () { /**类型 */ var typeParam = [];</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*类别</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">var</span> cateParam =<span style="color: rgba(0, 0, 0, 1)"> []; </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*职位 </span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">var</span> posParam =<span style="color: rgba(0, 0, 0, 1)"> []; </span></span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*回填选中项</span><span style="color: rgba(0, 128, 0, 1)">*/ /*这里我说明一下：这里是我们已经提交了参数，在从浏览器的 url 获取参数，通 data-type 来回填该选项是否是选中*/</span> <span style="color: rgba(0, 0, 255, 1)">var</span> param =<span style="color: rgba(0, 0, 0, 1)"> getUrlParam(); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (param &&<span style="color: rgba(0, 0, 0, 1)"> param.typeParam) { typeParam </span>= param.typeParam.split('A'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0; i < typeParam.length; i++<span style="color: rgba(0, 0, 0, 1)">) { $(</span>'[data-type="' + typeParam[i] + '"]').addClass('active'<span style="color: rgba(0, 0, 0, 1)">); } $(</span>'[data-type="type"]').removeClass('active'<span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 0, 255, 1)">if</span> (param &&<span style="color: rgba(0, 0, 0, 1)"> param.cateParam) { cateParam </span>= param.cateParam.split('A'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0; i < cateParam.length; i++<span style="color: rgba(0, 0, 0, 1)">) { $(</span>'[data-category="' + cateParam[i] + '"]').addClass('active'<span style="color: rgba(0, 0, 0, 1)">); } $(</span>'[data-category="category"]').removeClass('active'<span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 0, 255, 1)">if</span> (param &&<span style="color: rgba(0, 0, 0, 1)"> param.posParam) { posParam </span>= param.posParam.split('A'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0; i < posParam.length; i++<span style="color: rgba(0, 0, 0, 1)">) { $(</span>'[data-position="' + posParam[i] + '"]').addClass('active'<span style="color: rgba(0, 0, 0, 1)">); } }/* 到这里 回填结束 /
/* 这里是选线的点击事件 **/
$(".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');</span><span style="color: rgba(0, 0, 255, 1)">var</span> className = me.attr("class"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">var</span> cate = me.attr('data-cate'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">类型判断</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (type !=<span style="color: rgba(0, 0, 0, 1)"> undefined) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (type == "type"<span style="color: rgba(0, 0, 0, 1)">) { $(</span>'.type-table [data-cate]').removeClass('active'); typeParam =<span style="color: rgba(0, 0, 0, 1)"> []; } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { $(</span>'[data-type="type"]').removeClass('active'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (className == 'active'<span style="color: rgba(0, 0, 0, 1)">) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (typeParam.indexOf(cate) > -1<span style="color: rgba(0, 0, 0, 1)">) typeParam.remove(cate); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (typeParam.indexOf(cate) == -1<span style="color: rgba(0, 0, 0, 1)">) typeParam.push(cate); } } $(</span>"#typeParam").val(typeParam.toString().replace(re, "A"<span style="color: rgba(0, 0, 0, 1)">)); } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">类别判断</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (category !=<span style="color: rgba(0, 0, 0, 1)"> undefined) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (category == "category"<span style="color: rgba(0, 0, 0, 1)">) { $(</span>'.type-table [data-category]').removeClass('active'); cateParam =<span style="color: rgba(0, 0, 0, 1)"> []; } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { $(</span>'[data-category="category"]').removeClass('active'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (className == 'active'<span style="color: rgba(0, 0, 0, 1)">) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (cateParam.indexOf(cate) > -1<span style="color: rgba(0, 0, 0, 1)">) cateParam.remove(cate); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (cateParam.indexOf(cate) == -1<span style="color: rgba(0, 0, 0, 1)">) cateParam.push(cate); } } $(</span>"#cateParam").val(cateParam.toString().replace(re, "A"<span style="color: rgba(0, 0, 0, 1)">)); } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">职位判断</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (position !=<span style="color: rgba(0, 0, 0, 1)"> undefined) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (className == 'active'<span style="color: rgba(0, 0, 0, 1)">) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (posParam.indexOf(cate) > -1<span style="color: rgba(0, 0, 0, 1)">) posParam.remove(cate); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (posParam.indexOf(cate) == -1<span style="color: rgba(0, 0, 0, 1)">) posParam.push(cate); } $(</span>"#posParam").val(posParam.toString().replace(re, "A"<span style="color: rgba(0, 0, 0, 1)">)); }/************ 选项卡点击事件结束 ****************/
if (className == 'active') {
me.removeClass("active");
} else {
me.addClass("active");
}</span><span style="color: rgba(0, 0, 255, 1)">var</span> re = <span style="color: rgba(0, 0, 255, 1)">new</span> RegExp(",", "g"); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义正则表达式 这里是我用来分隔参数用的</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (typeParam.length > 0<span style="color: rgba(0, 0, 0, 1)">) { $(</span>"#typeParam").val(typeParam.toString().replace(re, "A"<span style="color: rgba(0, 0, 0, 1)">)); } </span><span style="color: rgba(0, 0, 255, 1)">if</span> (cateParam.length > 0<span style="color: rgba(0, 0, 0, 1)">) { $(</span>"#cateParam").val(cateParam.toString().replace(re, "A"<span style="color: rgba(0, 0, 0, 1)">)); } </span><span style="color: rgba(0, 0, 255, 1)">if</span> (posParam.length > 0<span style="color: rgba(0, 0, 0, 1)">) { $(</span>"#posParam").val(posParam.toString().replace(re, "A"<span style="color: rgba(0, 0, 0, 1)">)); } });});
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 }
四、结语
分享到这里结束，可能代码有点多不好看懂。不过没关系，有不懂的地方可以联系我，我们一起学习一起进步！