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

Sab Ene 11 19:08:53 ART 2014

Hola Rodrigo,

	a pagina1.php (que nombre poco descriptivo!) agregale más semántica,
para que salida quede así:

<modelos>
	<modelo>
		<id>1</id>
		<nombre>Gol</nombre>
	</modelo>
	<modelo>
		<id>2</id>
		<nombre>Golf</nombre>
	</modelo>
	<modelo>
		<id></id>
		<nombre>Suran</nombre>
	</modelo>
</modelos>

	Si no reccibís el valor para el VALUE, no vas a tener de dónde sacarlo!
	De paso, el código es más simple y directo si en cada ciclo del WHILE
generás cada entrada XML, que cargar todo en un vector para después
tener que recorrer el vector para generar el XML: con una sola
estructura de repetición basta.

	Después en JavaScript, leés los Modelos, pero ahora tenés adentro los
ID y los NOMBRE de cada uno. Los cargás al OPTION así:

...
var op=document.createElement('option');
op.value = id;
op.text = nombre;
select2.appendChild(op);
...

	ya que un OPTION tiene como propiedad un value y un text (en vez de
ponerle el text con un appendChild() adentro.
	Lo único que te queda por adaptar es la lectura del XML que ahora tiene
una forma diferente.

	Es una pavada! ;-)

El sáb, 11-01-2014 a las 18:34 -0200, Rodrigo Fernandez escribió:
> 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 !
> _______________________________________________
> Lista de correo: Php-avanzado
> Mensajes a la lista: Php-avanzado en pato2.fi.mdp.edu.ar
> Administración Web: http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado
> Desubscripción: php-avanzado-request en pato2.fi.mdp.edu.ar?subject=unsubscribe
> 

-- 
Leonardo Tadei
leonardot en pegasusnet.com.ar
Web: http://leonardo.tadei.com.ar
Firma pública: http://www.pegasusnet.com.ar/LeonardoTadei-public.key