Aquí tienes un ejemplo de lo que quieres. He comentado el código para que se pueda entender. Aquí hago uso de AJAX, para mostrar los datos en tiempo real. Sería mucho mejor que en vez de actualizar los datos por medio del botón se haga por evento de cambio de la lista.
Como consejo:
- No usar mysql (me refiero a la clase PHP), ha quedado obsoleto. Más provecho le puedes sacar a mysqli.
Tabla 'usuarios'
id: 1 | nombre: Guillermo | apellidos: García | anyo: 25-05-1995
id: 2 | nombre: Rodolfo | apellidos: Mogollón | anyo: 30-06-1985
select.html
<!doctype html>
<html lang="es">
<head>
<title>Prueba select</title>
</head>
<body>
<select id="select">
<option value="Guillermo">Guillermo</option>
<option value="Rodolfo">Rodolfo</option>
</select>
<button id="submit" type="submit">Mostrar</button>
<br>
<p id="apellidos"></p>
<p id="anyo"></p>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="ajax.js"></script>
</body>
</html>
ajax.js
$(document).on("ready", function() {
// evento click del botón 'Mostrar'
$("#submit").on("click", function(e) {
e.preventDefault();
var option = $("#select").val(); // guarda el nombre seleccionado del select
// crea un objeto JSON para enviarlo
var dataToSend = JSON.parse('{"name": "nombre", "value": "'+option+'"}');
$.ajax(
{
url: "process.php", // url que procesara la petición
dataType: "json", // tipo de datos a enviar
data: dataToSend, // datos a enviar (json)
type: "get" // metodo de petición
}
)
.done( function(data) {
$("#apellidos").html(data["apellidos"]);
$("#anyo").html(data["anyo"]);
console.log(dataToSend);
console.log(data);
})
.fail( function(jqXHR,textStatus,errorThrown) {
console.log("Ha ocurrido un error al obtener los datos del usuario");
});
});
});
process.php
<?php
$connection = new mysqli("127.0.0.1","root","pass","proyecto");
$connection->set_charset("utf8");
if($connection->connect_errno)
throw new Exception("Error al conectar a la base de datos");
$stmt = $connection->stmt_init();
$query = "SELECT apellidos,anyo FROM usuarios WHERE nombre=?";
if($stmt->prepare($query)) { // prepara la sentencia
$name = $_GET["value"];
$stmt->bind_param("s", $name); // bindea los datos
$stmt->execute(); // ejecuta la sentencia
$result = $stmt->get_result(); // obtiene los resultados
$connection->close();
echo json_encode($result->fetch_assoc()); // retorna los datos como JSON
}
<center>UPDATE: Mostrar los datos al cambiar de opción</center>
select.html
<!doctype html>
<html lang="es">
<head>
<title>Prueba select</title>
</head>
<body>
<select id="select">
<option value="Ninguno">Seleccionar</option>
<option value="Guillermo">Guillermo</option>
<option value="Rodolfo">Rodolfo</option>
</select>
<br>
<p id="apellidos"></p>
<p id="anyo"></p>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="ajax.js"></script>
</body>
</html>
ajax.js
$(document).on("ready", function() {
// evento click del botón 'Mostrar'
$("#select").on("change", function(e) {
var option = $(this).val(); // guarda el nombre seleccionado del select
if(option.toLowerCase() !== "ninguno") { // si se ha elegido un nombre
// crea un objeto JSON para enviarlo
var dataToSend = JSON.parse('{"name": "nombre", "value": "'+option+'"}');
ajaxProcess(dataToSend);
}
else { // si se ha seleccionado 'Ninguno' limpia los párrafos
$("p").each( function() {
$(this).html("");
});
}
});
function ajaxProcess(dataToSend) {
$.ajax(
{
url: "process.php", // url que procesara la petición
dataType: "json", // tipo de datos a enviar
data: dataToSend, // datos a enviar (json)
type: "get" // metodo de petición
}
)
.done( function(data) {
$("#apellidos").html(data["apellidos"]);
$("#anyo").html(data["anyo"]);
})
.fail( function(jqXHR,textStatus,errorThrown) {
console.log("Ha ocurrido un error al obtener los datos del usuario");
});
}
});
El archivo process.php es exactamente el mismo.
