jquery表单筛选器在每次选择后不重置

Question

我的jquery表单筛选器有点问题，它基于3个选项进行过滤，但只有在清除所选内容时才会重置。如果选择选项3，然后选择1，则保留选项3筛选器，只添加选项1筛选器，它不会重置，只实现选项1筛选器。

这是我的代码：

$("#Customer_Category").on("change", function () {
    if (this.value && this.value == 1) {
        $("#Legal_Name,#Branch,#Trading_Name").parents('.form-group').hide();
    }
    else if (this.value && this.value == 2) {
        $("#First_Name,#Last_Name,#Village,#dob").parents('.form-group').hide();
    }
    else if (this.value && this.value == 3) {
        $("#First_Name,#Last_Name,#Village,#id_number,#dob").parents('.form-group').hide();
    }
    else {
        $("#First_Name,#Last_Name,#Village,#id_number,#Legal_Name,#Branch,#Trading_Name").parent('div').parent('div').show();
    }
});

任何帮助都将不胜感激。

Answer 1

你需要显示所有的东西，然后隐藏那些你不想让用户看到的东西，否则效果是加性的。

$("#Customer_Category").on("change",function(){

$("#First_Name,#Last_Name,#Village,#id_number,#Legal_Name,#Branch,#Trading_Name").parent('div').parent('div').show();

    if(this.value && this.value == 1) {
        $("#Legal_Name,#Branch,#Trading_Name").parents('.form-group').hide();
    }
    else if (this.value && this.value == 2) {
        $("#First_Name,#Last_Name,#Village,#dob").parents('.form-group').hide();
    }
    else if (this.value && this.value == 3) {
        $("#First_Name,#Last_Name,#Village,#id_number,#dob").parents('.form-group').hide();
    }       
});

而且，我发现隐藏一切都更容易，然后具体地展示你需要隐藏的东西。