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();
    }       
});

此外，我发现隐藏所有内容然后专门显示您需要的内容会更容易。