每次選擇後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(); 
    }  
}); 

此外，我發現隱藏所有內容更容易，然後專門顯示您需要的內容。