Cargar dinamicamente datos generados con un select dinámico

andvilla07 · #1 (**permalink**) 26/03/2019, 14:07

Tengo el siguiente problema, resulta que estoy intentando generar filas de una tabla dinamicamente, en cada fila generada, se carga un select (select 1) donde, también dinamicamente, carga información en otro select (select 2) dependiendo del valor de la lista seleccionada en el select 1. Se generan las n listas que necesite, pero no cargan información diferente.

Espero me haga entender y haya utilizado correctamente esta plataforma.

Dejo los códigos implementados.

Si hace falta algo, que se me haya pasado, para entenderlo mejor, por favor, informármelo. Gracias.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style id="compiled-css" type="text/css">
#elicel thead tr{
	background-color: chocolate;
	color: white;
}
.delete{
	font:Arial, serif; color:red; font-weight: bold;
}
.add{
    font:Arial, serif; color:green;	font-weight: bold;
}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
window.onload=function(){
var tbody = document.querySelector("#elicel tbody"), 
	boton, celda, fila, clon;

tbody.addEventListener("click", function(event){
	boton = event.target;
	celda = boton.parentNode;
	fila = celda.parentNode;
    
	if (boton.className == "add"){
		clon = fila.cloneNode(true);
		celda.removeChild(boton);
		this.appendChild(clon);
	}
	
	if (boton.className == "delete"){
		if (confirm("¿Estás seguro de querer eliminar esta fila?")){
			if (tbody.querySelectorAll("tr").length > 1 && boton.nextElementSibling){
		        clon = boton.nextElementSibling.cloneNode(true);
		        fila.previousElementSibling.querySelector("td:last-child").appendChild(clon);
			}
		    this.removeChild(fila);
		}
	}
}, false);
}

</script>
</head>
<body bgcolor="#B6E0FA">
<?php
require("conexion.php");
echo"<table align=center class='normal' id=\"elicel\">
       <thead>
		<tr>
			<th>Idioma</th>
			<th>Horario</th>
			<th>Grupos</th>
			<th>Opciones</th>
		</tr>
	</thead><tbody><tr bgcolor=\"$color\"><td align=center>";
?>
<div class="selector-idiomas">
            <select class="campo" nombre="idiomas[]"></select>
            <script type="text/javascript">
                $(document).ready(function() {
                    $.ajax({
                            type: "POST",
                            url: "getIdiomas.php",
                            success: function(response)
                            {
                                $('.selector-idiomas select').html(response).fadeIn();
                            }
                    });

                });
            </script>
</div>
<?php
echo"</td><td align=center>";
?>           
 <div class="sin-json">
            <select class="campo" nombre="horarios[]"></select>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".selector-idiomas select").change(function() {
                        var form_data = {
                                is_ajax: 1,
                                pais: +$(".selector-idiomas select").val()
                        };
                        $.ajax({
                                type: "POST",
                                url: "getHorarios.php",
                                data: form_data,
                                success: function(response)
                                {
                                    $('.sin-json select').html(response).fadeIn();
                                }
                        });
                    });

                });
            </script>
</div>
<?php
echo"</td><td align=center><input name='grupos$i' type='text' id='grupos' size='3' maxlength='2' class='campo'/></td><td>"; ?>
<span class="delete">Eliminar</span>
<span class="add">Agregar</span>
<?php
echo"</td></tr>";
echo"</tbody></table><br>";
?>
</body>
</html>

este es el código del select 1

Código PHP:

  <?php 
include('conexion.php'); 
 
$query="SELECT cod_idi,idioma from idiomas ORDER BY cod_idi";  
$result=$mysqli->query($query); 
        
echo '<option value="0" class="campo">Seleccionar</option>'; 
while (($fila = mysqli_fetch_array($result)) != NULL) { 
    echo '<option value="'.$fila["cod_idi"].'">'.$fila["idioma"].'</option>'; 
} 
?>

este es el código del select 2

Código PHP:

  <?php 
include('conexion.php'); 
 
$query="SELECT horario.cod_hor,horario.horario,horario.cod_sede,sedes.sede from horario,sedes WHERE horario.cod_idi=".$_REQUEST["pais"]." and horario.tipo='PUB' and horario.estado='U' and horario.obs!='EST. UDN.' and horario.cod_sede=sedes.cod_sede ORDER BY horario.cod_sede,horario.cont asc"; 
$result=$mysqli->query($query); 
 
while (($fila = mysqli_fetch_array($result)) != NULL) { 
    echo '<option value="'.$fila["cod_hor"].'">'.$fila["horario"].' - '.$fila["sede"].'</option>'; 
} 
?>

Triby · #2 (**permalink**) 26/03/2019, 16:03

Sinceramente, no "te hiciste entender", pero puedes usar el buscador del foro, hay muchos temas acerca de selects dependientes que te servirán para resolver tu problema.