js前端多条件筛选查询

快来打我* 2023-08-17 17:47 119阅读 0赞

## 一、前言 ##

在做项目中，遇到多条件筛选案例。实现完成以后，我将我做的代码分享在这里，希望可以帮助到其他朋友。

## 二、效果截图 ##

![1116526-20190902091549447-1916264701.png][]

##  三、实现代码 ##

首先我先类型、类别、职位分成三块来处理，如果传到服务器端的话，就是三个参数。

html部分：

js部分：

$(function () {
        /**类型 */
        var typeParam = [];
    
        /**类别*/
        var cateParam = [];
    
        /**职位 */
        var posParam = [];
    
        /**回填选中项*/    /*这里我说明一下：这里是我们已经提交了参数，在从浏览器的 url 获取参数，通 data-type 来回填该选项是否是选中*/
        var param = getUrlParam();
        if (param && param.typeParam) {
            typeParam = param.typeParam.split('A');
            for (var i = 0; i < typeParam.length; i++) {
                $('[data-type="' + typeParam[i] + '"]').addClass('active');
            }
            $('[data-type="type"]').removeClass('active');
        }
    
        if (param && param.cateParam) {
            cateParam = param.cateParam.split('A');
            for (var i = 0; i < cateParam.length; i++) {
                $('[data-category="' + cateParam[i] + '"]').addClass('active');
            }
            $('[data-category="category"]').removeClass('active');
        }
    
        if (param && param.posParam) {
            posParam = param.posParam.split('A');
            for (var i = 0; i < posParam.length; i++) {
                $('[data-position="' + posParam[i] + '"]').addClass('active');
            }
        }
    /* 到这里  回填结束 */
    
    /**  这里是选线的点击事件   **/
        $(".type-table span").click(function () {
            var me = $(this);
            var type = me.attr('data-type');
            var category = me.attr('data-category');
            var position = me.attr('data-position');
    
            var className = me.attr("class");
            var cate = me.attr('data-cate');
    
            /*类型判断*/
            if (type != undefined) {
                if (type == "type") {
                    $('.type-table [data-cate]').removeClass('active'); typeParam = [];
                } else {
                    $('[data-type="type"]').removeClass('active');
                    if (className == 'active') {
                        if (typeParam.indexOf(cate) > -1)
                            typeParam.remove(cate);
                    } else {
                        if (typeParam.indexOf(cate) == -1)
                            typeParam.push(cate);
                    }
                }
                $("#typeParam").val(typeParam.toString().replace(re, "A"));
            }
    
            /*类别判断*/
            if (category != undefined) {
                if (category == "category") {
                    $('.type-table [data-category]').removeClass('active'); cateParam = [];
                } else {
                    $('[data-category="category"]').removeClass('active');
                    if (className == 'active') {
                        if (cateParam.indexOf(cate) > -1)
                            cateParam.remove(cate);
                    } else {
                        if (cateParam.indexOf(cate) == -1)
                            cateParam.push(cate);
                    }
                }
                $("#cateParam").val(cateParam.toString().replace(re, "A"));
            }
    
            /*职位判断*/
            if (position != undefined) {
                if (className == 'active') {
                    if (posParam.indexOf(cate) > -1) posParam.remove(cate);
                } else {
                    if (posParam.indexOf(cate) == -1) posParam.push(cate);
                }
                $("#posParam").val(posParam.toString().replace(re, "A"));
            }
    /************ 选项卡点击事件结束 ****************/
            if (className == 'active') {
                me.removeClass("active");
            } else {
                me.addClass("active");
            }
    
            var re = new RegExp(",", "g"); //定义正则表达式 这里是我用来分隔参数用的
            if (typeParam.length > 0) {
                $("#typeParam").val(typeParam.toString().replace(re, "A"));
            }
    
            if (cateParam.length > 0) {
                $("#cateParam").val(cateParam.toString().replace(re, "A"));
            }
    
            if (posParam.length > 0) {
                $("#posParam").val(posParam.toString().replace(re, "A"));
            }
    
        });
    });
    
    Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

附件 getUrlParam() 方法实现代码：主要是获取 URL 中参数的 Key 和 value

/**
     * 获取浏览器参数
     * @param {any} url
     */
    function getUrlParam(url) {
        var queryArr = (url && url.substr(url.indexOf('?') + 1).split('&')) ||
            location.search.substr(1).split('&'),
            query = {};
        for (var i = 0, len = queryArr.length; i < len; i++) {
            var key = queryArr[i].split('=')[0],
                val = queryArr[i].split('=')[1];
            if (query.hasOwnProperty(key)) {
                if (!Array.isArray(query[key])) {
                    query[key] = [query[key]]
                    query[key].push(val)
                } else {
                    query[key].push(val)
                }
                continue
            }
            query[key] = val
        }
        return query
    }

##  四、结语 ##

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

转载于:https://www.cnblogs.com/gzbit-zxx/p/11444793.html

[1116526-20190902091549447-1916264701.png]: /images/20230808/62a122ea753048148b67502ceb1003ef.png