<?php
$con_string_quickmenu="host=localhost port=5432 dbname=allion user=postgres password=postgres";//string de conexion
if($conexion_quickmenu = pg_connect($con_string_quickmenu)){//si se puede abrir la conexion a BD
echo ("conexion establecida con BD<br>");
}else{//si no se puede abrir la conexion
echo("no se puede conectar a la BD<br>");
}//fin del if-else conexion
$consulta=pg_query("SELECT id_1, nombre FROM elemento1");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Combos (select) dependientes, codigo fuente - ejemplo</title>
<script type="text/javascript">
function nuevoAjax(){
var xmlhttp=false;
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}//fin de funcion generica de ajax
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="paises";
listadoSelects[1]="estados";
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;
}//fin buscarEnArray
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;
var posicionSelectDestino=1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrige n);
// 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(listadoSelect s[x]);//hace select actual igual al select destino
selectActual.length=0;//hace el select actual de longitud cero
var nuevaOpcion=document.createElement("option");//crea una nueva opcion
nuevaOpcion.value=0; //pone cero en el value de la nueva opcion
nuevaOpcion.innerHTML="Selecciona Opción...";//pone el texto a la nuev opcion
selectActual.appendChild(nuevaOpcion);
selectActual.disabled=true;
x++;
}// fin while listadoSelects
}else if(idSelectOrigen!=listadoSelects[1]){//Compruebo que el select modificado no sea el ultimo de la cadena
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById('estados');
// var selectDestino2=document.getElementById('select2');
// 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.php?select="+idSelect Destino+"&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;
}//fin ajax.readyState==1
if (ajax.readyState==4){
// alert(selectDestino.parentNode.innerHTML);
// alert(selectDestino2.parentNode.innerHTML);
selectDestino.parentNode.innerHTML=ajax.responseTe xt;
}//ajax.readyState==4
}//ajax on ready state
ajax.send(null);
//--------------------------------------------------
var selectDestino2=document.getElementById('select2');
var idSelectDestino2='select2';
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajaxx=nuevoAjax();
ajaxx.open("GET", "select_dependientes_proceso2.php?select="+idSelec tDestino2+"&opcion="+opcionSeleccionada, true);
ajaxx.onreadystatechange=function(){
if (ajaxx.readyState==1){// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino2.length=0;
var nuevaOpcion=document.createElement("option");
nuevaOpcion.value=0;
nuevaOpcion.innerHTML="Cargando...";
selectDestino2.appendChild(nuevaOpcion);
selectDestino2.disabled=true;
}//fin ajax.readyState==1
if (ajaxx.readyState==4){
// alert(selectDestino.parentNode.innerHTML);
//alert(selectDestino2.parentNode.innerHTML);
selectDestino2.parentNode.innerHTML=ajaxx.response Text;
}//ajax.readyState==4
}//ajax on ready state
ajaxx.send(null);
//-----------------------------------------------------
}// else if
}//carga contenido
</script>
</head>
<body>
<div id="demo" style="width:600px;">
<div id="demoIzq">
<select name='paises' id='paises' onChange='cargaContenido(this.id)'>
<?php
//echo "<option value='0'>Elige</option>";
while($registro=pg_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
?>
</select>
</div>
<div id="demoDer">
<select disabled="disabled" name="estados" id="estados">
<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>
</body>
</html>