Jquery Filter

Change class name on click in jQuery

by Satheesh Kumar

HTML

<select id="event">
<option value="all">All</option>
<option value="upcoming">upcoming</option>
<option value="past">past</option>
</select>

<select id="city">
<option value="all">All</option>
<option value="karur">karur</option>
<option value="coimbatore">coimbatore</option>
</select>

<select id="date">
<option value="all">All</option>
<option value="3-mar">3rd March</option>
<option value="12-oct">12 October</option>
</select>


<div data-event="upcoming" data-city="karur" data-date="3-mar">
Upcoming Karur 3rd March
</div> 

<div data-event="upcoming" data-city="coimbatore" data-date="12-oct">
Upcoming Coimbatore 12th October
</div>
<div data-event="past" data-city="karur" data-date="3-mar">
Past Karur 3rd March
</div>
<div data-event="past" data-city="coimbatore" data-date="12-oct">
Past coimbatore 12th October
</div>

JavaScript

/* Event  */
$("#event").on("change", function(){
var valu = $(this).val();

if(valu != "all"){
eventFilter(valu);
}
else{
	$('[data-event]').css("display", "flex");
}
reset();
});
/* City */
$("#city").on("change", function(){
var valu = $(this).val();
if(valu != "all"){
 cityFilter(valu);
}
else{
var a =	$("#event").val();
if (a != "all"){
	$("[data-event="+a+"]").each(function(){
  	$(this).css("display", "flex");
  });
}
}
});
/* City */
$("#date").on("change", function(){
var valu = $(this).val();
if(valu != "all"){
 dateFilter(valu);
}
else{
var a =	$("#event").val();
if (a != "all"){
	$("[data-event="+a+"]").each(function(){
  	$(this).css("display", "flex");
  });
}
}
});
function eventFilter(data){
		var a = data;
    var c = $("#city").val();
        var d = $("#date").val();
               
    $('[data-event]').each(function(){
    var b = $(this).attr("data-event");
    if (a === b){
    $(this).css("display", "flex");
    }
    else{
    $(this).css("display", "none");
    }
    });
    
}
function cityFilter(data){
var a = data;
var c = $("#event").val();

if(c != "all"){
$('[data-event='+c+']').each(function(){
    var b = $(this).attr("data-city");
    if (a === b){
    $(this).css("display", "flex");
    }
    else{
    $(this).css("display", "none");
    }
    });
}
else{
    $('[data-city]').each(function(){
    var b = $(this).attr("data-city");
    if (a === b){
    $(this).css("display", "flex");
    }
    else{
    $(this).css("display", "none");
    }
    });
}

}

function dateFilter(data){
var a = data;
var c = $("#event").val();

if(c != "all"){
$('[data-event='+c+']').each(function(){
    var b = $(this).attr("data-date");
    if (a === b){
    $(this).css("display", "flex");
    }
    else{
    $(this).css("display", "none");
    }
    });
}
else{
    $('[data-date]').each(function(){
    var b = $(this).attr("data-city");
    if (a === b){
    $(this).css("display", "flex");
    }
    else{
    $(this).css("display", "none");
    }
...