Como bien dices, con una petición asíncrona (Ajax), lograrías tu cometido. En el archivo en el que se encuentra el
<select>
, debes tener el siguiente código JS:
Código Javascript
:
Ver originalvar select = document.getElementsByName("actividad")[0],
salida = document.getElementById("salida"), //Elemento para listar los datos
ajax = function(url, objetivo){
var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject("Microsoft.XMLHTTP") ||
new ActiveXObject("Msxml2.XMLHTTP");
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
switch (xhr.status){
case 200:
objetivo.innerHTML = xhr.responseText;
break;
case 404:
objetivo.innerHTML = "La dirección brindada no existe";
break;
default:
objetivo.innerHTML = "Error: " + xhr.status;
break;
}
}
};
xhr.send(null);
};
select.addEventListener("change", function(){
ajax("proceso.php?" + this.name + "=" + this.value, salida);
}, false);
Con esto, mostrarás en el elemento de
id
salida (o el que desees asignarle), el resultado de la petición, la cual será lo que devuelva el archivo
proceso.php. En dicho archivo, deberás recibir el dato como
$_GET['actividad']
, realizas la búsqueda en la tabla de la base de datos y emites un resultado, el cual será lo que la función Ajax finalmente asignará como contenido del elemento
salida. Puedes tener a la función Ajax en un archivo JS aparte, así la reutilizas en todos los archivos en los que necesites realizar peticiones asíncronas.
Si tienes dudas acerca del uso de peticiones asíncronas (Ajax), nada mejor para despejarlas que leyendo una buena guía sobre el tema:
http://librosweb.es/ajax/
Saludos