Hola!

Registrándote como bakuno podrás publicar, compartir y comunicarte en privado con otros bakuos :D

Regístrame ya!

Ayuda con 3 select anidados

luis12011988

luis12011988

Bovino maduro
Desde
4 Jun 2011
Mensajes
294
Hola a todos, necesito ayuda.
Estoy tratando de llenar tres select a la vez, cuando haga clic en un select, se me debe cargar de datos la segunda y cuando haga clic en la segunda, se llenara la tercera.
Lo estoy haciendo con jquery, php y mysql pero lo malo es que mi primer select no se carga de datos

aqui les dejo un link para que se descarguen mi proyecto y me puedan ayudar a encontrar el error:
https://www.dropbox.com/s/we1q0tbidii520m/protecnasac1.rar?dl=0

tambien les comparto una parte de mi codigo, porsiaca:

formulario.php

<html>
<head>
<tittle></tittle>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(funcion(){
$.ajax({
url:'datos.php?Accion=GetDepartamentos',
success:function(Datos){
for (x=0;x<Datos.length;x++) {
$("‪#‎CboDepartamentos‬").append(new Option(Datos[x].departamento,Datos[x].id_departamento));
}
}
})
$('#CboDepartamentos').change(function(){
$('‪#‎CboProvincias‬,‪#‎CboDistritos‬').empty();
$.getJSON('datos.php',{Accion:'GetProvincias',id_departamento:$('#CboDepartamentos option:selected').val()}, function(Datos){
for (x=0;x<Datos.length;x++) {
$("#CboProvincias").append(new Option(Datos[x].provincia,Datos[x].id_provincia));
}
})
});
$('#CboProvincias').change(function(){
$('#CboDistritos').empty();
$.getJSON('datos.php',{Accion:'GetDistritos',id_provincia:$('#CboProvincias option:selected').val()}, function(Datos){
for (x=0;x<Datos.length;x++) {
$("#CboDistritos").append(new Option(Datos[x].distrito,Datos[x].id_distrito));
}
})
});

})
</script>
</head>
<body>
<div>
<label for="departamento">Departamento:</label>
<select id="CboDepartamentos">
</select>
</div>

<div>
<label for="provincia">Provincia:</label>
<select id="CboProvincias">
</select>
</div>

<div>
<label for="distrito">Distrito:</label>
<select id="CboDistritos">
</select>
</div>
</body>
</html>

datos.php

<?php

mysql_connect('localhost','root','');
mysql_select_db('protecnasac');
$Accion = $_REQUEST['Accion'];

if(is_callable($Accion)){
$Accion();
}

function GetDepartamentos(){
header('Content-Type: application/json');
$Departamentos = array();
$consulta = mysql_query("select * from departamento");
while ($fila = mysql_fetch_assoc($consulta) {
$Departamentos[] = $fila;
}
echo json_encode($Departamentos);
}
function GetProvincias(){
header('Content-Type: application/json');
$Provincias = array();
$consulta = mysql_query("select * from provincia where id_departamento = ".$_REQUEST['id_departamento']);
while ($fila = mysql_fetch_assoc($consulta) {
$Provincias[] = $fila;
}
echo json_encode($Provincias);
}
function GetDistritos(){
header('Content-Type: application/json');
$Distritos = array();
$consulta = mysql_query("select * from distrito where id_provincia = ".$_REQUEST['id_provincia']);
while ($fila = mysql_fetch_assoc($consulta) {
$Distritos[] = $fila;
}
echo json_encode($Distritos);
}

?>
 
Lo que yo hago es llenar las 3 con todos los datos que necesito, luego hago una funcion que me esconde en base a los datos seleccionados tanto en la primera como en las siguientes
Ej

<html>
<head>
<tittle></tittle>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Esconder($){
$('#CboDepartamentos, #CboProvincias, #CboDistritos').find('option').show();


}
$(function(){
})
</script>
</head>
<body>
<div>
<label for="departamento">Departamento:</label>
<select id="CboDepartamentos" name="CboDepartamentos">
<?php
foreach($departamentos as $id=>$valor){
echo'<option';
echo ' value="'.$id.'"';
//Aqui es donde se hace la magia con el java

echo ' datoPadre="'.$valor['padre'].'"';
echo '>';
echo $valor['nombre'];
echo'</option>';
}
</select>
</div>

<div>
<label for="provincia">Provincia:</label>
<select id="CboProvincias" name="CboProvincias">
<?php
foreach($provincias as $id=>$valor){
echo'<option';
echo ' value="'.$id.'"';
//Aqui es donde se hace la magia con el java

echo ' datoPadre="'.$valor['padre'].'"';
echo '>';
echo $valor['nombre'];
echo'</option>';
}
</select>
</div>

<div>
<label for="distrito">Distrito:</label>
<select id="CboDistritos" name="CboDistritos">
<?php
foreach($distritos as $id=>$valor){
echo'<option';
echo ' value="'.$id.'"';
//Aqui es donde se hace la magia con el java

echo ' datoPadre="'.$valor['padre'].'"';
echo '>';
echo $valor['nombre'];
echo'</option>';
}
</select>
</select>
</div>
</body>
</html>
 
No encontré como editar el post. Posteo la parte del script. Esta seria la idea general.

<script type="text/javascript">
function Esconder($){
$('#CboProvincias, #CboDistritos').find('option').hide();
Departamentos=$('#CboDepartamentos');
Provincias=$('#CboProvincias');
Distritos=$('#CboDistritos');
Provincias.find('option[datoPadre='+Departamentos.val()+']').show();
Distritos.find('option[datoPadre='+Distritos.val()+']').show();
}
$(function(){
$('#CboDepartamentos, #CboProvincias, #CboDistritos').change(function(){Esconder($)});
Esconder($);
})
</script>
 
Cambiara un poco a estructura haciendo que el perimer select se llene en automatico con php y los otros con ajax segun las seleccion.
 
Debes iniciar sesión o registrarte para participar.
Volver
Arriba