[Php-avanzado] Cargar Select con datos de otro Select mediante Ajax
Rodrigo Fernandez
shodri en gmail.com
Dom Ene 12 18:09:42 ART 2014
Gracias Leo por tan pronta y concisa respuesta !
Ahi lo logré aunque eso de appendChild firstChild.nodeValue no lo
termine de entender pero bueh, funca que es lo que importa.
Es una pavada! ;-) - no comparto la opinión...
Nos vemos !
El 11/1/14, Leonardo Tadei - Pegasus Tech Supply
<leonardot en pegasusnet.com.ar> escribió:
> 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
>
> _______________________________________________
> 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
>
Más información sobre la lista de distribución Php-avanzado