Ver Mensaje Individual
  #7 (permalink)  
Antiguo 17/05/2014, 12:18
Avatar de pierinamorajp
pierinamorajp
 
Fecha de Ingreso: abril-2014
Mensajes: 4
Antigüedad: 10 años
Puntos: 0
Pregunta Respuesta: Combos Dependientes 3 niveles php ajax mysql

Cita:
Iniciado por rjulio21 Ver Mensaje
YO pensaria en hacer algo así:
JAVASCRIPT :
Código Javascript:
Ver original
  1. $( document ).ready(function(){
  2.    
  3.     $( this ).on('change','[data-hijos=true]',function(){
  4.         idPadre = $( this ).attr('id');
  5.         urlAccion = $("[data-padre="+idPadre+"]").data('accion')
  6.         data = "s-ajax=true&"+idPadre+"="+encodeURIComponent(this.value);
  7.                 new jd.ajax({
  8.                     metodo:"POST",
  9.                     url: urlAccion,
  10.                     parametros:data,
  11.                     respuesta:"html",
  12.                     funcionCarga:function(ajax){
  13.                         $("[data-padre="+idPadre+"]").html(this.respuesta);  
  14.                     }
  15.                 });
  16.        
  17.     });
  18. });

Teniendo en cuenta que el objeto jd.ajax es la simple llamada a ajax que la puedes realizar con tu propio objeto o con $.ajax $.post de jquery. alli lo relevante es que agregues a los campos que son padres el atributo "data-hijos=true" y a cada selector hijo el data-padre=idDelPadre. le agregas un data-accion q tenga como valor la url a la q haras la petición. y por ese lado está listo la parte d javascript. solo te quedaria realizar cada metodo que devuelva los <options> segun la consulta que hagas a base de datos.

Esa lógica es independiente de niveles, por tanto podria servirte para 1 como para 10 niveles de dependencia.

Hola, rjulio21, disculpa, seguí tu consejo pero estoy algo confundida, estas son las modificaciones que le hice al código y señalare donde no entiendo:

<script type="text/javascript">
$(document).ready(function(){

$( this ).on('change','[data-hijos=true]',function(){
idregion = $( this ).attr('region');
urlAccion = $("[data-padre="+idregion+"]").data('buscaplanta.php')
data = "s-ajax=true&"+idregion+"="+encodeURIComponent(this.v alue);
new $.post({
metodo:"POST",
url: buscaplanta.php,
parametros:data,
respuesta:"html",
funcionCarga:function(post){
$("[data-padre="+idregion+"]").html(this.respuesta);
}
});

});
});
</script>

MIS DUDAS SON LAS SIGUIENTES:

*No se si este bien hacer el llamado "$.post"
*No se que debo colocar en la linea de funcionCarga donde puse "(post)"
*No entiendo porque cosa debo sustituir "respuesta" en la ultima linea.

Ademas... No se si deba repetir el codigo javascript cuantas veces select hijos tenga...

En vista de todas las confusiones, Agradeceria enormemente su ayuda :) ya que espero resolver esto cuanto antes.Muchas Gracias de antemano.

Ah! este es el form html:


<form action="#" method="POST" class="form-horizontal">
<h3>A Qui&eacute;n desea enviar?</h3>
<label for="region">Pa&iacute;s/Estado </label>
<?php
$region= mysql_query("SELECT id, nombre,pais FROM region order by pais");
?>
<select name="region" id="region" class="form-control" data-hijos="true">
<option>Seleccione</option>
<?php
while ($fila = mysql_fetch_array($region)){?>
<option value="<?php echo $fila['id'];?>"><?php echo $fila['pais'].' / '.$fila['nombre'];?></option>
<?php }?>
</select>
<h4>Planta:</h4>
<select class="form-control" name="planta" data-padre="<?php echo $fila['id'];?>" data-accion="buscaplanta.php"></select>
<h4>Departamento:</h4>
<select class="form-control" name="depa" data-padre="idPadre" data-accion="buscadepa.php"></select>
<h4>Tipo de Cargo:</h4>
<select class="form-control" name="cargo" data-padre="idPadre" data-accion="buscacargo.php"></select>
</form>