0

¡Hola! Yo tengo un div lleno de checkbox que desaparecen o aparecen dependiendo de una serie de selects. El problema es que tengo uno cuyo valor ya está preseleccionado pero no me funciona este filtro, para hacer que ande tengo que elegir otra opción y después volver a la que estaba seleccionada en un principio.

El valor del select si se agarra, y como dije, cambiando el select anda todo. ¿Cómo hago para que ande sin modificar el select? Gracias. Intente forzando un onchange, pero no sirvió.

hab.append(<p valorpiso='+name.Id_Piso+' valorbano='+name.Bano+' style="display:flow;" class="textoGrande"> <input type="checkbox" name="habitaciones[]" valorbano='+name.Bano+' style="display:flow;" valorpiso='+name.Id_Piso+' value=' + name.Id_Hab+'> ' + name.Desc_Hab + ' </p>)

actualizarcheck(piso_id, cat);

function actualizarcheck(piso_id, cat){

cat = $('#categoria').val();

        if(piso_id == "" && cat != ""){
            hab.find('[valorbano!='+cat+']').attr("style", "display:none");
            $('[valorbano='+cat+']').attr("style", "display:flow");
        }
}
2
  • La idea es que al haber un valor X preseleccionado en los select, los checkboxes esten ocultos hasta que se elija otra opción.. eso es? Commented el 20 dic. 2021 a las 20:23
  • @PauloUrbanoRivera quiero que se oculten los que no corresponden al valor preseleccionado! Ahora mismo me está mostrando todos, pero el filtro si funciona cuando elijo otro valor en el select
    – Juliana
    Commented el 20 dic. 2021 a las 20:25

1 respuesta 1

0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.