Estoy usando un menú desplegable para filtros y quiero que el valor seleccionado del menú desplegable aparezca en la parte superior para que los usuarios puedan ver cuál es su selección cuando se cierra el menú desplegable y continúan navegando.
En este escenario, digamos que selecciono "Opción 2", me gustaría que el valor de la sección de tramo de "Categoría" se reemplace por "Opción 2". (Intenté usar las etiquetas de selección y opción HTML, pero simplemente no funcionan para activar el filtro).
.dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: fixed; width: 50px; padding: 4px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } p { font-size: 16px; } <div class="dropdown"> <span>Category</span> <div class="dropdown-content"> <a href="www.site.com/option1"> <p>Option 1</p> </a> <a href="www.site.com/option2"> <p>Option 2</p> </a> <a href="www.site.com/option3"> <p>Option 3</p> </a> </div> </div>Cosas bastante simples. Para hacerlo más fácil, agregaría una clase a cada uno de los enlaces y, probablemente, también una al intervalo, por si acaso. Con todo, tendrías algo que se parece a esto:
<div class="dropdown"> <span class="selected-category">Category</span> <div class="dropdown-content"> <a class="dropdown-option" href="www.site.com/option1"><p>Option 1</p></a> <a class="dropdown-option" href="www.site.com/option2"><p>Option 2</p></a> <a class="dropdown-option" href="www.site.com/option3"><p>Option 3</p></a> </div> </div> document.querySelector('.dropdown-option').forEach(el => el.onclick = (e) => document.querySelector('.dropdown .selected-category').innerText = e.currentTarget.innerText);si no puede agregar un nombre de clase, solo necesita crear un buen selector utilizando los tipos de elementos en su lugar.
const categorySpan = document.querySelector('.dropdown span'); const dropdownItems = document.querySelector('.dropdown div a');entonces es lo mismo que con la clase.
Editar: Actualizado en base a los comentarios de Heretic Monkey (¡gracias!)
La pregunta está etiquetada [jQuery], por lo tanto, sin necesidad de cambiar el HTML...
$('a', '.dropdown-content').on('click', function() { $(this).closest('.dropdown').find('span').text(this.text()); });Esta expresión le dará a todos los menús desplegables construidos de manera similar en la página el comportamiento requerido.
Al atravesar el DOM desde el elemento en el que se hizo clic hasta el elemento de intervalo, no hay temor de que se produzcan conversaciones cruzadas entre diferentes menús desplegables.