Foros del Web » Programando para Internet » PHP »

Cargar dinamicamente datos generados con un select dinámico

Estas en el tema de Cargar dinamicamente datos generados con un select dinámico en el foro de PHP en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 26/03/2019, 14:07
 
Fecha de Ingreso: marzo-2011
Mensajes: 58
Antigüedad: 8 años, 2 meses
Puntos: 0
Cargar dinamicamente datos generados con un select dinámico

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>';
}
?>
  #2 (permalink)  
Antiguo 26/03/2019, 16:03
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.915
Antigüedad: 10 años, 10 meses
Puntos: 2164
Respuesta: Cargar dinamicamente datos generados con un select dinámico

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.
__________________
- León, Guanajuato
- GV-Foto



La zona horaria es GMT -6. Ahora son las 20:27.