Foros del Web » Programando para Internet » Javascript »

[AJAX] Desaparece un select al usar selects dependientes

Estas en el tema de [AJAX] Desaparece un select al usar selects dependientes en el foro de Javascript en Foros del Web. Hola a todos. Estoy utilizando por primera vez AJAX para un sitio web. La idea es que al seleccionar una opción en un input de ...
  #1 (permalink)  
Antiguo 08/02/2012, 05:34
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 15 años, 9 meses
Puntos: 26
[AJAX] Desaparece un select al usar selects dependientes

Hola a todos.
Estoy utilizando por primera vez AJAX para un sitio web. La idea es que al seleccionar una opción en un input de tipo radio la aplicación busque en la base de datos un conjunto de registros que pertenezcan a esa opción y comiencen con una letra elegida en un select ya cargado, dichos registros se deberían mostrar en otro select diferente. Voy a dar un ejemplo:
Tengo dos radio para seleccionar entre Masculino y Femenino, abajo hay un select para elegir una letra del abecedario y en otro select al lado se deberían mostrar todos los nombres que sean del sexo elegido y de la letra elegida, esto ocurriría cada vez que se cambie de género o de letra. Apenas se carga la página por primera vez, el género por defecto es Masculino y le letra es A, por lo tanto de entrada se muestran los hombres con un nombre que comienza en A.
El código que estuve utilizando lo armé a partir de un ejemplo que encontré en internet. Todo me funciona bien (al cambiar de género o letra el select de destino dice "Cargando..." hasta que carga las opciones correctas, pero el problema es que en ese mismo momento desaparece el select de las letras y no sé cuál es el problema. Como ya dije es mi priemra vez usando AJAX y también estoy recién iniciado con JavaScript, por lo tanto me vendría bien algo de ayuda. También aclaro que modifiqué algunas cosas para armar el ejemplo, así que si hay algún error de sintaxis es simplemento por eso, insisto en que el problema es a la hora de llenar el select porque desaparece el de las letras o al menos eso creo yo.

Código:
function nuevoAjax()
{ 
	/* Crea el objeto AJAX.
	var xmlhttp=false;
	try
	{
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			// Creacion del objet AJAX para IE
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(E)
		{
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
		}
	}
	return xmlhttp; 
}

function cargarPersonas(generoSeleccionado, letraSeleccionada)
{
	var idSelectDestino="persona";
	var selectDestino=document.getElementById(idSelectDestino);
	
	// Creo el nuevo objeto AJAX y envio al servidor el género y letra seleccionados.
	var ajax=nuevoAjax();
	ajax.open("GET", "cargar_personas.php?genero="+generoSeleccionado+"&letra="+letraSeleccionada, true);
	ajax.onreadystatechange=function()
	{
		if (ajax.readyState==1)
		{
			// Mientras carga pongo "Cargando..."
			selectDestino.length=0;
			var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
			selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
		}
		if (ajax.readyState==4)
		{
			selectDestino.parentNode.innerHTML=ajax.responseText;
		} 
	}
	ajax.send(null);
}
Código PHP:
<?php
$letraSeleccionada 
$_GET['letra'];
$generoSeleccionado $_GET['genero'];

include(
'conexion.php');
$enlace conexion();
                    
$resultado mysql_query("SELECT id, nombre FROM persona WHERE nombre LIKE '$letraSeleccionada%' AND genero = '$generoSeleccionado'"$enlace) or die(mysql_error());

// Comienzo a imprimir el select
echo "<select name='persona' id='persona'>";
while(
$registro mysql_fetch_row($resultado))
{
    
// Imprimo las opciones del select
    
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}            
echo 
"</select>";

mysql_free_result($resultado);

mysql_close($enlace);
?>
Código HTML:
<input type="radio" name="genero" value="1" checked="checked" onclick="cargarPersonas(this.value, letra.options[letra.selectedIndex].value)" /> Masculino
<input type="radio" name="genero" value="2" onclick="cargarPersonas(this.value, letra.options[letra.selectedIndex].value)" /> Femenino

<select name="letra" id="letra" onChange="cargarPersonas(genero.value, this.options[this.selectedIndex].value)"> 
	<option>A</option>
	<option>B</option>
	<option>C</option>
	<option>D</option>
	<option>E</option>
</select>
<select name="persona" id="persona">
	<option value="3">Alberto</option>
</select> 

Última edición por RabidFish; 08/02/2012 a las 05:53

Etiquetas: ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:37.