Select dependiente no funciona con rutas especificas

andre___5025 · #1 (**permalink**) 18/12/2013, 19:16

Hola amigos. Hice un select dependiente dinámico de dos niveles. Lo probe y funciono pero resulta que tengo que hacerlo de la siguiente manera:

1- Dentro de la carpeta 'cabeza_hogar' esta el archivo 'cabeza_hogar.php' que es donde se visualizan los select para que el usuario seleccione.

2- Dentro de la carpeta 'cabeza_hogar' tambien esta una carpeta llamada 'select_zona_exp' en donde tengo mis archivos:

- conexion.php
- select_dependientes_proceso_zona_exp.php
- select_dependientes_zona_exp.js

los cuales son los que hacen que el select dinamico funcione. La verdad funciona bien, pero si coloco todos los archivos en una sola carpeta. pero, para mi no es optimizable, ya que debo hacer varios select dinamicos en el mismo formulario: Deber ser alguna ruta o algo que estoy haciendo mal. Por favor alguien que pueda ver lo que yo no y me colabore con este asunto y no se que mas hacer ya lo he revisado por varios días pero nada

Dejo el código para exponer mejor el caso:

Código:

cabeza_hogar.php

<html>
<title></title>
<head>
<script type="text/javascript" src="/select_zona_exp/select_dependientes_zona_exp.js"></script>
</head>
<body>

<tr>
<td>* Zona de expulsi&oacute;n:</td><td>
<?php generaPaises(); ?>
<?php
function generaPaises()
{
	//include 'conexion.php';
	include ('select_zona_exp/conexion.php');
	conectar();
	$consulta=mysql_query("SELECT cod_zona_exp, dtalle_zona_exp FROM zona_exp");
	desconectar();
	echo "<select name='cod_zona_exp' id='cod_zona_exp' onChange='cargaContenido(this.id)'>";
	echo "<option value='0'>Seleccione una opcion...</option>";
	while($registro=mysql_fetch_row($consulta))
	{
		echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
	}
	echo "</select>";
}
?>
</td>
</tr>

<tr>
<td>* Sitio de expulsi&oacute;n: </td><td>
				 <div id="demoDer"> 
					<select disabled="disabled" name="cod_barrios_veredas_exp" id="cod_barrios_veredas_exp">
						<option value="0">Seleccione una opci&oacute;n...</option>
					</select>
				 </div>
</td>
</tr>


</body>
</html>

Código:

conexion.php

<?php
function conectar()
{
	mysql_connect("localhost", "root", "12345");
	mysql_select_db("palma");
}

function desconectar()
{
	mysql_close();
}
?>

Código:

select_dependientes_proceso_zona_exp.php

<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"cod_zona_exp"=>"zona_exp",
"cod_barrios_veredas_exp"=>"barrios_veredas_exp"
);

function validaSelect($selectDestino)
{
	// Se valida que el select enviado via GET exista
	global $listadoSelects;
	if(isset($listadoSelects[$selectDestino])) return true;
	else return false;
}

function validaOpcion($opcionSeleccionada)
{
	// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
	if(is_numeric($opcionSeleccionada)) return true;
	else return false;
}

$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];

if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
	$tabla=$listadoSelects[$selectDestino];
	include 'conexion.php';
	conectar();
	$consulta=mysql_query("SELECT cod_barrios_veredas_exp, dtalle_barrios_veredas_exp FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
	desconectar();
	
	// Comienzo a imprimir el select
	echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
	echo "<option value=' '> </option>";
	while($registro=mysql_fetch_row($consulta))
	{
		// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
		$registro[1]=htmlentities($registro[1]);
		// Imprimo las opciones del select
		echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
	}			
	echo "</select>";
}
?>

Código:

select_dependientes_zona_exp.js

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]="cod_zona_exp";
listadoSelects[1]="cod_barrios_veredas_exp";

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&oacute;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_proceso_zona_exp.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);
	}
}