jquery form filter not resetting after each selection

user_6611693 0
Viewed 44

I'm having a little problem with my jquery form filter, I have it filtering based on 3 options, but it only resets when you clear the selection. If you select option 3 and then option 1 it keeps the option 3 filters and just adds the option 1 filters, it does not reset and only implement the option 1 filters.

here is my code:

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

any help would be greatly appreciated.

laravel jquery
1 Answers

You need to show everything and then hide the ones you don't want the user to see, otherwise the effect is additive. 

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

Also, I find that it's easier to hide everything and then specifically show the ones you need to.

user_9099730
Related