• 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
    }
    复制代码

     四、结语

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

  • 相关阅读:
    ssh-keygen Linux 免密登录
    hostnamectl 修改 CentOS7 主机名
    微信公众平台开发—24点游戏
    微信公众平台开发—起步
    java的静态代理和动态代理(jdk、cglib)
    UEditor上传图片到七牛云储存(java)
    第四十篇-private,public,protected的区别
    第七篇--ubuntu18.04下面特殊符号
    6. 计算器界面
    第六篇--Ubuntu画图软件
  • 原文地址:https://www.cnblogs.com/sunny3158/p/15105163.html
Copyright © 2020-2023  润新知