No encontré un tema tan específico, así que espero que haya alguien aquí que pueda ayudarme. Este es el trato: estoy haciendo un árbol genealógico, para mi propósito personal, y lucho por encontrar algo viable para filtrar personas en mi árbol. De hecho, en la parte superior de mi página, quiero usar un filtro con y con los diferentes apellidos que aparecen en mi árbol. Quiero con solo hacer clic en un nombre, solo quedan todas las personas con ese nombre, y así sucesivamente con los demás nombres.
Aquí está mi HTML abreviado:
<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>y así. Probé muchos tipos diferentes de javascript pero ninguno funcionó. ¿Alguien podría ayudarme?
Aquí tienes
$('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>