js前端 多条件筛选查询

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)">&lt;</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)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>类型：<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</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)">&gt;</span>全部<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>全职<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>兼职<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

                    <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>类别：<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</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)">&gt;</span>全部<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>美容/美发<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>保姆/月嫂<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>电脑/IT<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>办公文员<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>诊所医疗<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>营业员<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>美甲<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>司机<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>衣产<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>酒吧/KTV<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>装修<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>其他<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

                    <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>类别：<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</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)">&gt;</span>全部<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>中餐<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>日餐<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>夫妻工<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>其他餐饮<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>职位：<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</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)">&gt;</span>经理<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>接电话<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>企台<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>打包/带位<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>看台<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>大厨<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>炒锅<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>帮炒<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>打杂<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>油锅<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>送餐<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>其他<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

                <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">/&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">/&gt;</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)">&lt;</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)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
                区域：</span><span style="color: rgba(0, 0, 255, 1)">&lt;</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)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</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)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</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 &amp;&amp;<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 &lt; 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 &amp;&amp;<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 &lt; 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 &amp;&amp;<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 &lt; 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) &gt; -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) &gt; -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) &gt; -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 &gt; 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 &gt; 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 &gt; 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
}

 

 

 四、结语

　　分享到这里结束，可能代码有点多不好看懂。不过没关系，有不懂的地方可以联系我，我们一起学习一起进步！