[Php-avanzado] Cargar Select con datos de otro Select mediante Ajax

Sab Ene 11 17:34:50 ART 2014

Que tal phperos!
Les cuento que ando complicado queriendo cargar un select de modelos
de autos mediante otro de marcas de autos. Asi si uno elige Renault,
se cargan todos los modelos de Renault, etc.

Modificando un ejemplo de www.ajaxya.com.ar lo logré hacer, pero mi
problema ahora es que no se como pasar el "value" de los modelos, me
queda el <option></option> pelado. Sin más les paso el código:

pagina.php--------------------------------------------------------------------------------------------------

<html>
<head>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<h1>Prueba de cargar un control de tipo select recuperando datos del servidor
mediante AJAX</h1>
Seleccione la carrera:
<select id="marcas" name="marcas">
	<option value="0">Seleccionar....</option>

	<?php

	include '../includes/conect.php';
	$qry="SELECT * FROM marcas";
	$res=mysqli_query($link, $qry);
	while($row=mysqli_fetch_array($res)){	?>

	<option value="<?=$row['id']?>"><?=$row['marca']?></option>

	<?php
	 }
	 ?>
</select><span id="espera"></span><br>
Materias de la carrera:
<select id="modelos" name="modelos">
</select><br>
</body>
</html>

pagina1.php-----------------------------------------------------------------------------------------------------------

<?php
$car=$_REQUEST['cod'];
include '../includes/conect.php';
$materias=array();
$valores=array();
$qry="SELECT * FROM modelos WHERE id_mar=$car";
$res=mysqli_query($link, $qry);
while ($row=mysqli_fetch_array($res)){
	$modelos[]=$row['modelo'];
}

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

funciones.js---------------------------------------------------------------------------------------------------------------

addEvent(window,'load',inicializarEventos,false);

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

var conexion1;
function mostrarMaterias(e)
{
  var codigo=document.getElementById('marcas').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('modelos');
    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('modelo');
    var select2=document.getElementById('modelos');
    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">';  }
}

//***************************************
//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;
}

La verdad que soy bastante queso con todo lo que tiene que ver con
Javascript y busque pero no encontré ninguna ayuda.

Mi problema es como pasar también como valor del option
(<modelo></modelo>) el id del modelo.

Si alguien que se da más maña con esto me da una mano más que agradecido.

Saludos !