I didn't find such a specific topic so I hope there is anyone here who could help me. Here's the deal: I'm making a family tree, for my personal purpose, and I struggle with finding something viable to filter people on my tree. As a matter of fact, on top of my page, I want to use a filter with and with the different family names appearing in my tree. I want just by clicking on a name, all the people with this name only remain, and so on with the other names.
Here's my shortened HTML:
<div class="searchbar">
<h3>Title</h3>
<select>
<option value="all">TOUS</option>
<option value="name1">NAME 1</option>
<option value="name2">NAME 2</option>
<option value="name3">NAME 3</option>
<option value="name4">NAME 4</option>
</select>
</div>
<div class="content">
<h2>Gen 0</h2>
<div class="person origin name1">
<h3>1 ・ FULL NAME</h3>
<p>BIRTH</p>
<p>WEDDING</p>
<p>DEATH</p>
</div>
<h2>Gen -1</h2>
<div class="person name1">
<h3>2 ・ FULL NAME</h3>
<p>BIRTH</p>
<p>WEDDING</p>
<p>DEATH</p>
</div>
<hr>
<div class="person name2">
<h3>3 ・ FULL NAME</h3>
<p>BIRTH</p>
<p>WEDDING</p>
<p>DEATH</p>
</div>
</div>
and so on. I tried many different kinds of javascript but none of them worked. Could anyone could help me?
Here you go
$('select.filtter').change(function(){
var filters = $.map($('select.filtter').toArray(), function(e){
return $(e).val();
}).join(".");
$("div.content").find("div.person").hide();
$("div.content").find("div.person." + filters).show();
if($("div.person:visible").length === 0){
$(".alert").show()
}else{
$(".alert").hide()
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtters=wrap">
<label class="visually-hidden" for="data-title">Title</label>
<select class="filtter" id="data-actor-lang">
<option value="all">TOUS</option>
<option value="name1">NAME 1</option>
<option value="name2">NAME 2</option>
<option value="name3">NAME 3</option>
<option value="name4">NAME 4</option>
</select>
</div>
<div class="content">
<h2>Gen 0</h2>
<div class="person origin all name1">
<h3>1 ・ FULL NAME</h3>
<p>BIRTH</p>
<p>WEDDING</p>
<p>DEATH</p>
</div>
<h2>Gen -1</h2>
<div class="person all name1">
<h3>2 ・ FULL NAME</h3>
<p>BIRTH</p>
<p>WEDDING</p>
<p>DEATH</p>
</div>
<hr>
<div class="person all name2">
<h3>3 ・ FULL NAME</h3>
<p>BIRTH</p>
<p>WEDDING</p>
<p>DEATH</p>
</div>
<div class="alert" style="display:none;">Sorry, no person found.</div>
</div>