0

Estoy haciendo un registro de alumnos, con options que me traen información desde la Base de datos. Para los campos PROGRAMA, GRUPO y ALUMNO estoy ocupando listas dependientes, me traen info de la BD dependiendo de lo que seleccione en una antes.

Con los campos PROGRAMA y GRUPO no tengo problemas, el tema viene cuando quiero traer a los alumnos del grupo seleccionado; para el campo ALUMNO estoy ocupando el complemento de Boostrap Selectpicker que me permite seleccionar varios objetos de la lista que se despliega pero no logro que se visualicen en el campo pero el inspector de red si aparece que esta trayendo los alumnos.

Estoy casi seguro que debe ser por el código que tengo de JQuery, pero no logro asimilar como debería ser la lógica. Para las listas dependientes uso un archivo aparte donde hago la petición a la BD. Espero y me puedan ayudar.

    <div class="form-group">
      <label for="program_id" class="col-lg-2 control-label">Programa*</label>
      <div class="col-md-6">
        <select name="program_id" id="program_id" class="form-control" required disabled="disabled">
          <option value="">-- SELECCIONE --</option>
        </select>
      </div>

    </div>

    <div class="form-group">
      <label for="group_id" class="col-lg-2 control-label">Grupo*</label>
      <div class="col-md-6">
        <select name="group_id" id="group_id" class="form-control" required disabled="disabled">
          <option value="">-- SELECCIONE --</option>
        </select>
      </div>
    </div>

    <div class="form-group " id="alumno">
      <label class="col-lg-2 control-label">Alumno*</label>
      <div class="col-md-6">
        <select  class="form-control selectpicker" multiple data-live-search="true" required>
          <option name="alumn_id" id="alumn_id" value=""></option>


        </select>
      </div>
    </div>
$(document).ready(function() {
      $('#program_id').on('change', function() {
        if ($('#program_id').val() == "") {
          $('#group_id').empty();
          $('<option value = "">--GRUPO--</option>').appendTo('#group_id');
          $('#group_id').attr('disabled', 'disabled');
        } else {
          $('#group_id').removeAttr('disabled', 'disabled');
          $('#group_id').load('core/app/ajax/request_get.php?program=' + $('#program_id').val());
        }
      });
    });

    $(document).ready(function() {
      $('#group_id').on('change', function() {
        if ($('#group_id').val() == "") {
/*           $('#alumno').addClass('hidden'); */
        } else {
/*           $('#alumno').removeClass("hidden"); */
          $('#alumn_id').load('core/app/ajax/request_get.php?group=' + $('#group_id').val());
        }
      });
    });
    <?php if (isset($_GET['group'])) {
    $id_group = intval($_REQUEST['group']); ?>

    <?php
    $query_grupo = mysqli_query($con, "SELECT * FROM person WHERE id_into_group = '$id_group' AND kind=3 ORDER BY created_at DESC");
    while ($al = mysqli_fetch_array($query_grupo)) {
        $id_alumno = $al['id'];
        $nombre = $al['name'];
        $apellidos = $al['lastname'];
        $matricula = $al['code'];
    ?>
        <option value="<?php echo $id_alumno ?>"> <?php echo $matricula . " - " . $nombre . " " . $apellidos ?> </option>

<?php
    }
}
?>
6
  • Solo 2 consultas, porque tienes 2 $(document).ready y el ultimo trozo de codigo esta llendo dentro del select?. Respondiendo a tu pregunta, prueba agregar esto al final de cada funcion donde termines de llenar el select dinamicamente, $('.selectpicker').selectpicker() Commented el 14 dic. 2020 a las 22:24
  • Apenas estoy aprendiendo Jquery/JS entonces aun no se muy bien la sintaxis (pero funciona jaja) y con relacion a lo segundo si esta llendo al select que tengo en el formulario Commented el 14 dic. 2020 a las 22:28
  • Solo es necesario 1 $(document).ready y lo que te dije al final deberia funcionarte, es para renderizar un selectpicker creado/agregado dinamicamente Commented el 14 dic. 2020 a las 22:32
  • Asi? $('#group_id').on('change', function() { if ($('#group_id').val() == "") { } else { $('#alumn_id').load('core/app/ajax/request_get.php?group=' + $('#group_id').val()); } $('.selectpicker').selectpicker() }); Commented el 14 dic. 2020 a las 22:37
  • Si, pruebalo... Commented el 14 dic. 2020 a las 22:39

1 respuesta 1

0

Investigando encontre una solucion parecida a tu caso, en si es aumentar el .selectpicker('refresh') pero despues del load() para que se renderize en el momento que carga, asi:

<div class="form-group " id="alumno">
      <label class="col-lg-2 control-label">Alumno*</label>
      <div class="col-md-6">
    
        <select  class="form-control selectpicker" multiple data-live-search="true" name="alumn_id" id="alumn_id" required>

        </select>

      </div>
    </div>

$(document).ready(function() {
      $('#group_id').on('change', function() {
        if ($('#group_id').val() == "") {
/*           $('#alumno').addClass('hidden'); */
        } else {
/*           $('#alumno').removeClass("hidden"); */
          $('#alumn_id').load('core/app/ajax/request_get.php?group=' + $('#group_id').val()).selectpicker('refresh');
        }
      });
    });

Pero porque el refresh, simple, en la documentacion dice lo siguiente:

Para actualizar mediante programación una selección con JavaScript, primero manipule la selección y luego use el método refresh para actualizar la interfaz de usuario para que coincida con el nuevo estado. Esto es necesario al eliminar o agregar opciones, o al deshabilitar / habilitar una selección a través de JavaScript.

Con respecto a lo que me decias, el name,id van en el select, no en un option

Referencia:

3
  • Hola, eh probado con el codigo que me proporcionaste y sigo sin tener exito, pasa algo curioso con otro método que provee pero no se si este bien: tengo la estructura del <select> pero pongo un <option id="alumn_id"> </option> y sigo la misma estructura del codigo de JQuery y tengo en el selectpicker un option vacio, pero lo selecciono y me trae todos los alumnos del Query que estoy haciendo, andujunto un enlace con el video. youtu.be/dB06eYW6cxw Commented el 14 dic. 2020 a las 23:42
  • @JoseLuisH creo que estoy un poco ciego, el .selectpicker('refresh') debe seleccionar al select no a un option, por ello borra ese option que tienes y usa el select para hacer el load, editara mi respuesta para que veas Commented el 15 dic. 2020 a las 4:27
  • Hola, sigo sin poder solucionarlo ya eh puesto la solución que me pusiste pero no sigo con lo mismo, te agradezco el tiempo que te tomaste para intentar ayudarme. Gracias Commented el 15 dic. 2020 a las 17:04

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.