15 ­ Car gar  un contr ol de tipo select 
Confeccionaremos un problema que contenga dos controles de tipo select. En el primero 
almacenaremos una lista de carreras de estudio ("Analista de 
Sistemas","Telecomunicaciones" y "WebMaster") 
Cuando se seleccione una carrera enviaremos una petición al servidor para que retorne todas las materias que tiene esa carrera y procederemos a la carga del segundo select. 
El archivo HTML es el siguiente (pagina1.html): 
 
 
 

Prueba de cargar un control de tipo select recuperando datos del 
servidor 
mediante AJAX

 
Seleccione la carrera: 
 
Seleccionar.... 
Analista de sistemas Telecomunicaciones 
WebMaster 

 
Materias de la carrera: 
 

 
 
 

Luego el archivo que contiene las funciones de JavaScript (funciones.js) es: 
addEvent(window,'load',inicializarEventos,false); 
function inicializarEventos() 
{ var select1=document.getElementById('carreras'); 
addEvent(select1,'change',mostrarMaterias,false); 
} 
var conexion1; 
function mostrarMaterias(e) 
{ 
var codigo=document.getElementById('carreras').value; 
if (codigo!=0) 
{ 
conexion1=crearXMLHttpRequest(); 
conexion1.onreadystatechange = procesarEventos; 
conexion1.open('GET','pagina1.php?cod='+codigo, true); 
conexion1.send(null); 
} 
else 
{ var select2=document.getElementById('materias'); 
select2.options.length=0; 
} 
}

function procesarEventos() 
{ 
if(conexion1.readyState == 4) 
{ 
var d=document.getElementById('espera'); 
d.innerHTML = ''; 
var xml = conexion1.responseXML; 
var pals=xml.getElementsByTagName('materia'); 
var select2=document.getElementById('materias'); 
select2.options.length=0; 
for(f=0;f { var op=document.createElement('option'); 
var texto=document.createTextNode(pals[f].firstChild.nodeValue); 
op.appendChild(texto); 
select2.appendChild(op); 
} 
} 
else 
{ 
var d=document.getElementById('espera'); 
d.innerHTML = '';  } 
} 

//*************************************** 
//Funciones comunes a todos los problemas 
//*************************************** function addEvent(elemento,nomevento,funcion,captura) 
{ 
if (elemento.attachEvent) 
{ 
elemento.attachEvent('on'+nomevento,funcion); 
return true; 
} 
else 
if (elemento.addEventListener) 
{ 
elemento.addEventListener(nomevento,funcion,captura); 
return true; 
} 
else 
return false; 
} 
function crearXMLHttpRequest() 
{ 
var xmlHttp=null; 
if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
else 
if (window.XMLHttpRequest) 
xmlHttp = new XMLHttpRequest(); 
return xmlHttp; 
}

En la primera función que se ejecuta luego de haberse cargado completamente la página 
definimos el evento change para el primer select: 
var select1=document.getElementById('carreras'); 
addEvent(select1,'change',mostrarMaterias,false); Es decir cuando hagamos la selección de un item del primer select se dispara la función 
mostrarMaterias. 
La función mostrar materias: 
function mostrarMaterias(e) 
{ 
var codigo=document.getElementById('carreras').value; 
if (codigo!=0) 
{ 
conexion1=crearXMLHttpRequest() 
conexion1.onreadystatechange = procesarEventos; 
conexion1.open('GET','pagina1.php?cod='+codigo, true); 
conexion1.send(null); 
} 
else 
{ var select2=document.getElementById('materias'); 
select2.options.length=0; 
} 
} 

Rescata el valor del primer select (es decir donde estan almacenadas los nombres de 
carreras. Si está seleccionada procede a crear un objeto de tipo XMLHttpRequest y le 
pasa como parámetro el código de la carrera respectiva. 
En caso de seleccionar el primer item del select (contiene el texto "Seleccionar....") ...

Leer documento completo

Regístrate para leer el documento completo.