Digamos que tengo una lista de clasificación como esta
.dropbtn { background-color: #04AA6D; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } <div class="dropdown"> <button class="dropSortbtn2"> Food <i class="bi bi-caret-down"></i></button> <div class="dropdown-content"> <a href="#">Tomato</a> <a href="#">APPle</a> <a href="#">Carrot</a> <a href="#">Broccoli</a> </div> </div>Quiero esa lista desplegable para ordenar la lista de elementos y ocultar otros,
entonces, por ejemplo, si tengo esta lista
<ul> <li>Tomato</li> <li>APPle</li> <li>Broccoli</li> <li>Carrot</li> <li>Tomato</li> <li>Broccoli</li> </ul>Y el usuario hace clic en tomate en la lista desplegable, todos los elementos deben estar ocultos y solo se mostrarán los elementos de tomate. ¿Cuál es la forma correcta de hacer esto? sabiendo que la lista desplegable de clasificación será muy larga.
Puede agregar un detector de eventos de click a todas las opciones de selección que recorre cada li en el ul y oculta aquellos cuyo textContent de texto no es igual al textContent de texto de la opción de selección en la que se hizo clic.
const options = document.querySelectorAll('.dropdown .dropdown-content a') const listItems = document.querySelectorAll('#list li'); options.forEach(f => f.addEventListener('click', function(e){ let text = this.textContent; listItems.forEach(e => e.style.display = e.textContent == text ? "block" : "none") })) .dropbtn { background-color: #04AA6D; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } <div class="dropdown"> <button class="dropSortbtn2"> Food <i class="bi bi-caret-down"></i></button> <div class="dropdown-content"> <a href="#">Tomato</a> <a href="#">APPle</a> <a href="#">Carrot</a> <a href="#">Broccoli</a> </div> </div> <ul id="list"> <li>Tomato</li> <li>APPle</li> <li>Broccoli</li> <li>Carrot</li> <li>Tomato</li> <li>Broccoli</li> </ul>