select que refresque una pagina

[letingel]

Buenas tardes.

Colegas requiero ayuda en una cuestión importante, deseo realizar una pagina en php donde se presenta un select, en donde la opción que se seleccione tiene una variable posteriormente sacada de una base de datos, una vez se selecciona la opción se muestre unos datos obtenidos de la base de datos pero en la misma pagina, yo me imagino que se tendrá que realizar en ajax pero no se por donde empezar, agradezco toda la ayuda prestada.

EL codigo solo del select el resto es html basico

Código PHP:

  <?php 
$query3 = "SELECT * FROM Actividades WHERE id_contrato = '$id_contrato'";
              $row3 = mysql_query($query3,$conexion);
              $num_rows= mysql_num_rows($row3);
                echo '<select style="width:200px" onchange="this.style.width=200" name="actividad">';
                echo '<option value="">Actividades</option>';
                     for($i=0;$i<$num_rows;$i++){
                    $result=mysql_fetch_assoc($row3);
                    echo '<option value="'.$result["id_act"].'">'.$result["Descripcion"].'</option>';
                                                 }        
?>   

una imagen de la pagina:

[IMG]http://www.development.letingel.com/select.PNG[/IMG



Resalto que cuando se seleccione un item del select debe aparecer sus datos correspondientes de la base de datos, ese recuadro que aparece debajo del select no cambia para nada, mi principal inconveniente es con el select y su actualización en la misma pagina.

Gracias.

[Alexis88]

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:

var 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

[letingel]

Muchas gracias, lo estudiare para ver a fondo como es su funcionamiento.