每次选择后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(); 
    }  
}); 

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