15 - Cargar un control 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):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
</head>
<body>
  <h1>Prueba de cargar un control de tipo select recuperando datos del servidor mediante AJAX</h1>
  Seleccione la carrera:
  <select id="carreras" name="carreras">
    <option value="0">Seleccionar....</option>
    <option value="1">Analista de sistemas</option>
    <option value="2">Telecomunicaciones</option>
    <option value="3">WebMaster</option>
  </select><span id="espera"></span><br>
  Materias de la carrera:
  <select id="materias" name="materias">
  </select><br>
</body>
</html>

Luego el archivo que contiene las funciones de JavaScript (funciones.js) es:

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var select1=document.getElementById('carreras');
  select1.addEventListener('change',mostrarMaterias,false);
}

var conexion1;
function mostrarMaterias(e) 
{
  var codigo=document.getElementById('carreras').value;
  if (codigo!=0)
  {
    conexion1=new XMLHttpRequest();
    conexion1.onreadystatechange = procesarEventos;
    conexion1.open('GET','pagina1.php?cod='+codigo, true);
    conexion1.send();
  }
  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<pals.length;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 = '<img src="../cargando.gif">';
  }
}

En la primer función que se ejecuta luego de haberse cargado completamente la página definimos el evento change para el primer select:

function inicializarEventos()
{
  var select1=document.getElementById('carreras');
  select1.addEventListener('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=new XMLHttpRequest();
    conexion1.onreadystatechange = procesarEventos;
    conexion1.open('GET','pagina1.php?cod='+codigo, true);
    conexion1.send();
  }
  else
  {
    var select2=document.getElementById('materias');
    select2.options.length=0;
  }
}

Rescata el valor del primer select (es decir donde están 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....") procedemos a borrar el contenido del segundo select.

La función procesarEventos:

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<pals.length;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 = '<img src="../cargando.gif">';
  }
}

Rescata el contenido del archivo XML retornado del servidor:

    var xml = conexion1.responseXML;

Como sabemos el archivo XML contiene un conjunto de materias:

    var pals=xml.getElementsByTagName('materia');

Mediante un for las rescatamos y las agregamos al segundo select:

    for(f=0;f<pals.length;f++)
    {
      var op=document.createElement('option');
      var texto=document.createTextNode(pals[f].firstChild.nodeValue);
      op.appendChild(texto);
      select2.appendChild(op);
    }

Nos queda el programa que se ejecuta en el servidor para generar el archivo XML con las materias de la carrera seleccionada por el visitante (para facilitar el problema no hemos dispuesto esta información en una base de datos)

pagina1.php

<?php
$car=$_REQUEST['cod'];
if ($car==1)
{
  $materias=array('Programacion I','Analisis Matematico','Estructura de las Organizaciones','Etica Profesional');
}
if ($car==2)
{
  $materias=array('Fundamentos de Fisica','Analisis Matematico 1','Ingles Tecnico I','Sistemas de Comunicaciones I
');
}
if ($car==3)
{
  $materias=array('Informatica I','Multimedia I','Bases de Datos');
}


$xml="<?xml version=\"1.0\"?>\n";
$xml.="<materias>\n";
for($f=0;$f<count($materias);$f++)
{
  $xml.="<materia>".$materias[$f]."</materia>\n";
}
$xml.="</materias>\n";
header('Content-Type: text/xml');
echo $xml;

?>


Problema resuelto.


Confeccionaremos un problema que contenga dos controles de tipo select. En el primero almacenar una lista de carreras de estudio ("Analista de Sistemas","Telecomunicaciones" y "WebMaster") y en el segundo los nombres de las materias de la carrera seleccionada. Rescatar los datos del servidor en el momento que se selecciona una carrera.


pagina1.html



Ejecutar ejemplo



funciones.js




pagina1.php


Retornar