0

Tengo 5 selects en cascada con la jerarquia siguiente: Ley, Titulo, Capitulo, Sección y Subsección. He conseguido que al seleccionar una ley, se muestren los titulos a los que pertenecen esa ley, si después selecciono un titulo, este afecta al select de capitulos y me muestra a los capitulos que pertenecen a ese titulo ... y así sucesivamente. Este es el codigo jquery que utilizo:

<script type="text/javascript">
    
    $(document).ready(function(){
        $("#nuevotitulo").hide();
    
        $("#sel_ley").change(function(){
            var leyid = $(this).val();
            
            //Fin mostrar/ocultar

            $.ajax({
                url: 'gets/gettitulos.php',
                type: 'post',
                data: {select_ley:leyid},
                dataType: 'json',
                success:function(response){
                    var len = response.length;
                    $("#sel_titulo").empty();
                    for( var i = 0; i<len; i++){
                        var id_tit = response[i]['id_tit'];
                        var num_tit = response[i]['num_tit'];
                        var nombre_tit = response[i]['nombre_tit'];

                        $("#sel_titulo").append("<option value='"+id_tit+"'> TITULO "+num_tit+"&nbsp;"+nombre_tit+"</option>");
                        }
                    }
                });
        });
    });
</script>
    
    <!-- Script Titulo a Capitulos-->
    
    <script type="text/javascript">
    
    $(document).ready(function(){
        $("#nuevocapitulo").hide();
        
        $("#sel_titulo").change(function(){
            var tituloid = $(this).val();
            
            //Ocultamos o mostramos boton nuevocapitulo
            //Fin mostrar/ocultar

            $.ajax({
                url: 'gets/getcapitulos.php',
                type: 'post',
                data: {select_titulo:tituloid},
                dataType: 'json',
                success:function(response){

                    var len = response.length;
                    $("#nuevocapitulo").show(); 
                    
                    $("#sel_capitulo").empty();
                    for( var i = 0; i<len; i++){
                        var id_cap = response[i]['id_cap'];
                        var num_cap = response[i]['num_cap'];
                        var nombre_cap = response[i]['nombre_cap'];

                        $("#sel_capitulo").append("<option value='"+id_cap+"'> Capitulo "+num_cap+"&nbsp;"+nombre_cap+"</option>");

                    }
                }
            });
        });

    });
</script>
    <!-- Script Capitulos a Secciones-->
    
    <script type="text/javascript">
    
    $(document).ready(function(){

        $("#sel_capitulo").change(function(){
            var capituloid = $(this).val();

            $.ajax({
                url: 'gets/getsecciones.php',
                type: 'post',
                data: {select_capitulo:capituloid},
                dataType: 'json',
                success:function(response){

                    var len = response.length;

                    $("#sel_seccion").empty();
                    for( var i = 0; i<len; i++){
                        var id_sec = response[i]['id_sec'];
                        var num_sec = response[i]['num_sec'];
                        var nombre_sec = response[i]['nombre_sec'];

                        $("#sel_seccion").append("<option value='"+id_sec+"'> Seccion "+num_sec+"&nbsp;"+nombre_sec+"</option>");

                    }
                }
            });
        });

    });
</script>
    
    <!-- Script secciones a SubSecciones-->
    
    <script type="text/javascript">
    
    $(document).ready(function(){

        $("#sel_seccion").change(function(){
            var seccionid = $(this).val();

            $.ajax({
                url: 'gets/getsubsecciones.php',
                type: 'post',
                data: {select_seccion:seccionid},
                dataType: 'json',
                success:function(response){

                    var len = response.length;

                    $("#sel_subseccion").empty();
                    for( var i = 0; i<len; i++){
                        var id_sub = response[i]['id_sub'];
                        var num_sub = response[i]['num_sub'];
                        var nombre_sub = response[i]['nombre_sub'];

                        $("#sel_subseccion").append("<option value='"+id_sub+"'> Seccion "+num_sub+"&nbsp;"+nombre_sub+"</option>");

                    }
                }
            });
        });

    });
</script>

Tengo 2 problemas (entiendo que relacionados): El primero es que solo consigo que el select afecte al select jerarquico inferior con lo que si después de seleccionar una ley, luego un titulo, y luego un capitulo, si vuelvo a seleccionar una ley, solo se "refresca" el titulo y sigue mostrando los datos de capitulos que no pertenecen a esa ley. El segundo, si en mi base de datos, el primer titulo de una ley tiene capitulos o secciones o subsecciones, al hacer select en una ley, me muestra el primer titulo pero no los capitulos o secciones o subsecciones que pueden depender de él. (solo afecta a un select).

Haciendo pruebas no he conseguido que un select afecte a más de uno... a ver si me podeis ayudar. Si necesitais mas info no dudeis en pedirme.. Gracias!!

1 respuesta 1

0

Saludos.

Debes colocar un llamado en cascada de esos AJAX al momento que cambia el dato; así como tener bien definido cuando solo limpiar y también poblar los select; a grandes rasgos y sin entrar tanto en detalle sería algo como lo siguiente (respecto al código que compartes):

Observo usas jQuery. Por simplicidad no abordare los momentos que ocultas, muestras u otra acción en tu interfaz/componentes.

var aplicarCascada = true; // Nuestro flag

$(function () {
   // Asociar el change a cada select
   $("#sel_ley").change(function () {
      aplicarCascada  = false;
      // Primero limpias; para asegurar quitar elementos previamente existentes
      $("#sel_titulo").empty();
      $("#sel_capitulo").empty();
      $("#sel_seccion").empty();
      $("#sel_subseccion").empty();

      var idActual = $(this).val(); // Tu valor actual seleccionado

      $.ajax({
         //Tus opciones
         success : function () {
            var len = response.length;

            // Haces tu foreach

            aplicarCascada  = true;
            $("#sel_titulo").change(); // Invocamos el siguiente elemento

         }
      });
   });

   $("#sel_titulo").change(function () {
      if (aplicarCascada) {
         aplicarCascada  = false;
         // Primero limpias; para asegurar quitar elementos previamente existentes
         $("#sel_capitulo").empty();
         $("#sel_seccion").empty();
         $("#sel_subseccion").empty();

         var idActual = $(this).val(); // Tu valor actual seleccionado

         $.ajax({
            //Tus opciones
            success : function () {
               var len = response.length;

               // Haces tu foreach

               aplicarCascada  = true;
               $("#sel_capitulo").change(); // Invocamos el siguiente elemento

            }
         });
      }
   });

   $("#sel_capitulo").change(function () {
      if (aplicarCascada) {
         aplicarCascada  = false;
         // Primero limpias; para asegurar quitar elementos previamente existentes
         $("#sel_seccion").empty();
         $("#sel_subseccion").empty();

         var idActual = $(this).val(); // Tu valor actual seleccionado

         $.ajax({
            //Tus opciones
            success : function () {
               var len = response.length;

               // Haces tu foreach

               aplicarCascada  = true;
               $("#sel_seccion").change(); // Invocamos el siguiente elemento

            }
         });
      }
   });

   $("#sel_seccion").change(function () {
      if (aplicarCascada) {
         aplicarCascada  = false;
         // Primero limpias; para asegurar quitar elementos previamente existentes
         $("#sel_subseccion").empty();

         var idActual = $(this).val(); // Tu valor actual seleccionado

         $.ajax({
            //Tus opciones
            success : function () {
               var len = response.length;

               // Haces tu foreach

               aplicarCascada  = true;

            }
         });
      }
   });
})

También incluir aplicarCascada = true aún cuando la petición ajax devuelva error.

Espero te sea de utilidad.

1
  • Perfecto!!! Muchas gracias RobertoLeOr. Después de revisar y modificar algunas cosas, la funcionado correctamente.
    – Shaggy men
    Commented el 25 may. 2023 a las 6:51

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.