Selects dinamicos con Ajax
Muchas veces tenemos que hacer que varios campos select de una página web sean dinámicos, es decir dependan unos
de otros o que sus listas de valores se actualicen al realizar una determinada acción.
Una forma sencilla de realizar selects dinámicos es con Ajax. Os voy a presentar un sencillo ejemplo de esto.
Para ello en primer lugar necesitamos un formulario con 2 inputs de tipo select:
<html> <body> <script type="text/javascript" language="javascript" src="ajax_script.js"></script> <form name="formulario"> <!-- primer select de categorias --> <select name="categorias" onchange="obtenerSubCategorias();"> <option value="1">deportes</option> <option value="2">comida</option> <option value="3">empresas</option> </select> <!-- capa que contiene al segundo select, el dependiente --> <div id="capaSubCategorias"> <select name="subCategorias"> </select> </div> </form> </body> </html>
Podemos ver en el primer select el evento onchange. Cuando el valor seleccionado para una categoria varíe,
se ejecutará la función “obtenerSubCategorias”. Esta función está definida en el fichero javascritp ajax_script.js.
Este fichero es el siguiente:
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Tu navegador no soporta la tecnología Ajax!Usa Firefox por ejemplo");
}
}
var gestorPeticiones = getXmlHttpRequestObject();
function obtenerSubCategorias() {
if (gestorPeticiones.readyState == 4 || gestorPeticiones.readyState == 0) {
var idCategoria = document.formulario.categorias.value;
gestorPeticiones.open("POST", 'getSubCategorias.php', true);
gestorPeticiones.onreadystatechange = controlGetSubCategorias;
gestorPeticiones.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
gestorPeticiones.send("idCategoria="+idCategoria);
}
}
function controlGetSubCategorias() {
if (gestorPeticiones.readyState == 4) {
var ss = document.getElementById('capaSubCategorias');
var str = gestorPeticiones.responseText;
ss.innerHTML =str;
}
}
ObtenerSubCategorias utiliza la variable gestorPeticiones que es un objeto XMLHttpRequest, el cual es
una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores web.
El código es bastante sencillo y fácil de entender. Abrimos una conexión con el servidor pidiendo la página
getSubCategorias.php y le pasamos como parámetros el idCategoria.
Cuando la conexión se haya efectuado, el control de las operaciones lo llevará la función controlGetSubCategorias.
Esta función lo que hará es sustituir el contenido de la capa capaSubCategorias por el resultado obtenido en la página llamada,
consiguiendo generar un nuevo select con las subcategorias de la categoria seleccionada.
El código de getSubCategorias.php es:
<?php
$idCategoria = $_GET['idCategoria'];
echo "<select>";
getSubcategorias($idCategoria);
echo "</select>";
/*recuperará las subcategorias a partir del id de categoria.*/
function getSubcategorias($idCategoria){
echo <<< OPCIONES
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
OPCIONES;
}
?>
Será necesario modificar este fichero, para atacar a la base de datos y generar dinámicamente los options del select a partir
del id de la categoria.
Espero que os sea de ayuda.
