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
}
}
?>
$(document).ready
y el ultimo trozo de codigo esta llendo dentro delselect
?. Respondiendo a tu pregunta, prueba agregar esto al final de cada funcion donde termines de llenar elselect
dinamicamente,$('.selectpicker').selectpicker()
$(document).ready
y lo que te dije al final deberia funcionarte, es para renderizar unselectpicker
creado/agregado dinamicamente