Select dependiente de 3 niveles no funciona al agregar un select más ?
Este es otro ejemplo que encontre en la web, que funcion pero son de 3 nivles al hacerlos de 4 niveles no me funciona el ultimo select aunque en este si puedo coger del formulario los datos mediante el arreglo POST.
Código PHP:
<?php
if($_POST) {
print_r($_POST);
}
function generaSelect()
{
include 'conexion.php';
conectar();
$consulta=mysql_query("SELECT id, opcion FROM select_1");
desconectar();
// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX Prueba </title>
<link rel="stylesheet" type="text/css" href="select_dependientes_3_niveles.css">
<script type="text/javascript" src="select_dependientes_3_niveles.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="demo" style="width:800px;">
<div id="demoUlt">
<select disabled="disabled" name="select4" id="select4">
<option value="0">Selecciona opción...</option>
</select>
</div>
<div id="demoDer">
<select disabled="disabled" name="select3" id="select3">
<option value="0">Selecciona opción...</option>
</select>
</div>
<div id="demoMed">
<select disabled="disabled" name="select2" id="select2">
<option value="0">Selecciona opción...</option>
</select>
</div>
<div id="demoIzq"><?php generaSelect(); ?></div>
</div>
<p>
<label for="Submit"></label>
<input type="submit" name="Submit" value="Enviar" id="Submit">
</p>
</form>
</body>
</html>
ahora el codigo Js
Código HTML:
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";
listadoSelects[3]="select4";
function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}
function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "select_dependientes_3_niveles_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
si alguien me puede decir que debo modificar en el javascript, sin embargo seguire dandole vueltas al codigo, aunque para mi es bien complicado todo esto ya que poco le he dado a Javascript.
Gracias.