Select dropdown con AJAX
La siguiente programación podría ser útil en el supuesto que de por ejemplo queramos tener en nuestra Web un formulario de registro de usuarios donde puedan seleccionar su país de origen y una província estando país y província relacionados mediante base de datos. Es decir, que si escojemos España como país tenga como relacionadas las províncias de Barcelona, Madrid, Valencia, etc.
En el ejemplo que vamos a ilustrar estamos cogiendo los datos de paises y provincias de una versión 2.2 de Oscommerce.
Lo primero que tendremos que hacer es incluir en el <head> de nuestra página el siguiente archivo javascript que viendo el código fuente del ejemplo podrás ver su contenido.
<script type="text/javascript" src="ajax_dropdown.js"></script>
Dentro de este archivo ajax nos tenemos que quedar sobretodo con la llamada que se realiza tras realizar la petición:
var url="state_dropdown.php?country="+key;
Si nos fijamos se realizará una visita al archvio «state_dropdown.php» con la id del país elegido. En este archivo PHP se realiza lo siguiente:
$country = $_GET['country'];
$zones_query = mysql_query("select zone_name from zones where zone_country_id = '" . (int)$country . "' order by zone_name", $conexion);
if (mysql_num_rows($zones_query) > 0) {
header('Content-type: text/html; charset=iso-8859-1');
echo '<select name="state">';
while ($zones_values = mysql_fetch_array($zones_query)) {
echo '<option value="'.$zones_values['zone_name'].'">'.$zones_values['zone_name'].'</option>';
}
echo '</select>';
}
Se recibe la id de la base de datos del país y se genera un query para seleccionar todas sus zonas o provincias y con un echo mostramos el selector de provincia con las opciones recogidas de la base de datos.
Y en nuestro <body> tendremos un formulario que contendrá algo parecido a lo siguiente:
<form method="post" action="index.php">
Pais:
<select onchange="loadXMLDoc(this.value);" name="country">
<option selected="" value="">Seleccione</option>
<?php
$countries = mysql_query("select countries_id, countries_name from countries order by countries_name", $conexion);
while($row = mysql_fetch_array($countries)) {
echo '<option value="'.$row['countries_id'].'">'.$row['countries_name'].'</option>';
}
?>
</select><br/>
Provincia:
<div style="display:inline" id="states"></div>
</form>
Si nos fijamos en el formulario, la clave del asunto está en que al seleccionar el país o al cambiarlo se llama a la función loadXMLDoc() pasándole como parámetro la id del país. Y luego la provincia será un div vacío que se rellenará tras rellenar el país.
En el ejemplo es conveniente elegir el país «Spain» para ver el efecto ya que el resto de paises no tienen provincias guardadas en base de datos.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Select dropdown con AJAX”
Deja una respuesta
116 artículos que te podrían interesar
Ver más sobre
I feel this is one of the most vital information for me. And i am satisfied studying your article. However should statement on some basic things, The web site taste is great, the articles is in reality nice :D. Just right job, cheers.