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
}

 

 

 四、結語

　　分享到這里結束，可能代碼有點多不好看懂。不過沒關系，有不懂的地方可以聯系我，我們一起學習一起進步！