5 Selects Dependientes Entrelazadas Dinámicos con Ajax, php, mysql

wilrocaul · #1 (**permalink**) 27/11/2008, 11:19

Que tal amigos estoy tratando de trabajar con 5 listas dependientes con ajax, json, php y mysql.........

He utilizado como base un codigo de ajax de http://www.librosweb.es/ajax/capitulo8.html .

Trabajando con este codigo con 3 listas funciona muy bien, pero al momento de trabajar con 4 listas no carga el cuarto combo, ojala me pueda echar un ojo y ver que estoy haciendo mal...

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=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/hoja.css">
<title>Listas Desplegables Dinámicas</title>
<script language="javascript" type="text/javascript">
//1.----INSTANCIAR REQUEST---------------------------------------
function inicializa_xhr() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); 
  } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
}
//2.-FUNCION PARA MOSTRAR REGIONES------------------------------
function muestraRegiones() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById("region");
      var regiones = eval('(' + peticion.responseText + ')');
	  lista.options[0] = new Option("- region -");
      var i=1;
      for(var codigo in regiones) {
        lista.options[i] = new Option(regiones[codigo], codigo);
        i++;
      }
    }
  }
}

//5.-FUNCION PARA CARGAR PROVINCIAS----------------------------------
function cargaProvincias() {
  var lista = document.getElementById("region");
  var region = lista.options[lista.selectedIndex].value;
  if(!isNaN(region)) {
    peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraProvincias;
      peticion.open("POST", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_provinciasJSON.php?nocache=" + Math.random(), true);
      peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  peticion.send("region=" + region);
    }
  }
}
//4.-FUNCION PARA MOSTRAR PROVINCIAS--------------------------------
function muestraProvincias() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById("provincia");
      var provincias = eval('(' + peticion.responseText + ')');
	  lista.options.length = 0;
      var i=0;
      for(var codigo in provincias) {
        lista.options[i] = new Option(provincias[codigo], codigo);
        i++;
      }
    }
  }
}

//7.--FUNCION PARA CARGAR CIUDADES EN COMBO
function cargaCiudades() {
  var lista = document.getElementById("provincia");
  var provincia = lista.options[lista.selectedIndex].value;
  if(!isNaN(provincia)) {
    peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraCiudades;
      peticion.open("POST", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_ciudadesJSON.php?nocache=" + Math.random(), true);
      peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  peticion.send("provincia=" + provincia);
    }
  }
}
//6.--FUNCION PARA MOSTRAR CIUDADES
function muestraCiudades() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById("ciudad");
      var ciudades = eval('(' + peticion.responseText + ')');
	  lista.options.length = 0;
      var i=0;
      for(var codigo in ciudades) {
        lista.options[i] = new Option(ciudades[codigo], codigo);
        i++;
      }
    }
  }
}
//9.- CARGAR SERVICIOS-----------------------------------------------
function cargaServicios() {
  var lista = document.getElementById("ciudad");
  var ciudad = lista.options[lista.selectedIndex].value;
  alert(ciudad);
  if(!isNaN(ciudad)) {
    peticion = inicializa_xhr();
    if (peticion) {
	  peticion.onreadystatechange = muestraServicios;
      peticion.open("POST", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_serviciosJSON.php?nocache=" + Math.random(), true);
      peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  peticion.send("ciudad=" + ciudad);
	 }
  }
}
//8.- MOSTRAR SERVICIOS--------------------------------------------
function muestraServicios() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
	  var lista = document.getElementById("servicio");
	  var servicios = eval('(' + peticion.responseText + ')');
	  lista.options.length = 0;
      var i=0;
      for(var codigo in servicios) {
        lista.options[i] = new Option(servicios[codigo], codigo);
        i++;
      }
    }
  }
}

//3.-PRINCIPAL LLAMADAS A ONLOAD-------------------------------------
window.onload = function() {
  peticion = inicializa_xhr();
  if(peticion) {
    peticion.onreadystatechange = muestraRegiones;
    peticion.open("GET", "http://localhost/www.pruebas.com/select_dependientes/servidor/carga_regionesJSON.php?nocache="+Math.random(), true);
    peticion.send(null);
  }
  document.getElementById("region").onchange = cargaProvincias;
  document.getElementById("provincia").onchange = cargaCiudades;
  document.getElementById("ciudad").onchange = cargaServicios;
}
</script>
</head>
<body>
<form>
  <!--<label for="region">Region</label>!-->
  <select id="region">
    <option>Cargando...</option>
  </select>
  <br/><br/>
<!--<label for="provincia">Provincia</label>!-->
  <select id="provincia">
    <option>- provincia -</option>
  </select>
   <br /><br />
  <select id="ciudad">
 	<option>- ciudad -</option>
  </select>
   <br /><br />
  <select id="servicio">
 	<option>- servicio -</option>
  </select>
 
</form>
</body>
</html>

el codigo php lo he probado y manda bien el array respectivo para su tratamiento a traves de JSON en el codigo AJAX...

Gracias por su ayuda...