Estoy bastante fuera de forma si hablamos de JQuery
, pero creo que esto podría servir
$(document).ready(() => {
let valSelect = $("#categories").val();
manageDisplay(valSelect);
$("#categories").on("change", () => {
valSelect = $("#categories").val();
manageDisplay(valSelect);
});
});
const manageDisplay = (cat) => {
console.clear();
if (cat) {
const parent = document.getElementById("options");
const items = parent.children;
for (let i = 0; i < items.length; i++) {
const flag = cat === items[i].className;
const display = flag ? "block" : "none";
$((items[i].style.display = display));
}
}
};
<h3>Seleccione la categoría</h3>
<select id="categories">
<option value="">Seleccione</option>
<option value="futbol">Fútbol</option>
<option value="desarrollo" selected>Desarrollo</option>
<option value="juegos">Juegos</option>
</select>
<hr />
<div id="options">
<p class="futbol">Bayern Munich</p>
<p class="desarrollo">ReactJS</p>
<p class="juegos">FIFA</p>
<p class="futbol">Colo Colo, el equipo más grande de Chile</p>
<p class="desarrollo">C#</p>
<p class="juegos">Guitar Hero</p>
<p class="futbol">Boca Juniors</p>
<p class="desarrollo">Javascript</p>
<p class="juegos">Outlast</p>
<p class="futbol">Flamengo</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Primero, obtenemos el valor del select
y llamamos a la función manageDisplay, la cual recibe como parámetro la categoría.
Y dentro de esta función, obtenemos los elementos hijos que tiene el div
con id options, para luego recorrer los hijos (elementos <p>
), y comparamos si la categoría seleccionada, corresponde con la categoría de los hijos - de ahí que el class
de cada elemento haga referencia a su respectiva categoría -, y dependiendo del flag, mostramos o no mostramos los elementos.
PD: Lo más probable, es que no te funciona la preselección al inicio,
porque toda la lógica la tienes dentro del evento onChange
; y al
momento de levantar tu aplicativo, onChange aún no se ha ejecutado ;).
Como no conocemos mucho el contexto de tu problema, hice un casuística ficticia, basándome en lo que explicas. Sólo es cosa de adaptarla a tu caso real y listo :)
Cualquier duda, nos comentas.