#javascript: Selects dependientes con #AJAX – ejemplo práctico by @edanps

Fuente: http://www.formatoweb.com.ar/ajax/select_dependientes.php

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes 🙂

Importante

El script de esta página NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). Si deseas descargarte un script que genere automáticamente el código necesario para hacer funcionar select dependientes multinivel, con comunicación XML, que utilice JavaScript no intrusivo y sea muy sencillo de usar, visita este script.

Instrucciones

Hacer click en la primera lista desplegable, seleccionar cualquier opción de las dispuestas. El segundo select será habilitado en el momento que se haya seleccionado una opción válida del primer select y mostrará las opciones disponibles que se correspondan con dicha elección, por supuesto sin realizar recarga de la página.
El código fuente esta compuesto por dos archivos “.php” con sus estilos y funciones JavaScript en archivos externos más los SQL necesarios para el armado de las tablas. El listado de países y estados se incluye también con el ejemplo.

Funcionamiento

El primer select es generado mediante una función escrita en lenguaje de servidor (en este caso PHP) la cuál se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. Cuando el valor de este primer select es modificado, el evento onChange de JavaScript se dispara llamando a una función. Esta función se encargará de determinar cuál select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo. Si el usuario ha seleccionado la opción “Elige”, los select posteriores en la cadena de actualización cambiarán su estado a “Selecciona opción…”. Por el contrario, si la opción elegida no es “Elige”, se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. El servidor validará lo que recibe para luego buscar en su base de datos el listado de opciones que correspondan a lo elegido por el usuario (los cuales se relacionan en las tablas mediante un campo en común) y devolverá los datos en formato HTML. Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización, tarea que se hará mediante innerHTML.

Para obtener los códigos clickeá aquí.

Actualización

Los últimos cambios realizados son:

  • Re-estructuración del código fuente para hacerlo reutilizable para “X” cantidad de combos dependientes.
  • Añadido de comentarios nuevos para ayudar a la comprensión del sistema.
  • Código más claro y limpio, ideal para su estudio.

combo dinámico en #Ajax: localidades y provincias de #España by hellogoogle.com

fuente: http://www.hellogoogle.com/selector_combo_ajax_provincias_localidades/

En diversos proyectos he tenido la necesidad de trabajar con un formulario en el que uno de los campos es un selector de provincias y localidades de España. Tal vez usted también haya tenido esta misma necesidad durante el desarrollo de un proyecto.

En un enfoque tradicional sería necesario cargar en memoria todas las provincias y localidades, o dividir el proceso en dos fases: en la primera el usuario elegiría su provincia para luego seleccionar su localidad en un segundo paso. Un ejemplo de este enfoque tradicional es la web depáginas amarillas. Observe que el tiempo de carga de la página es considerablemente elevado.

Las nuevas técnicas de desarrollo web 2.0 nos ofrecen ahora la posibilidad de resolver este tipo de  funcionalidades de una manera mucho más elegante y eficiente.

Ejemplo de combo dinámico en Ajax 

Combo de localidades

En un enfoque 2.0 he desarrollado este ejemplo en el que puede ver un  formulario que permite al usuario seleccionar su localidad de manera muy rápida y eficiente. Ajax nos permite  trabajar con un documentoXML de más de 2Mb que contiene todas las localidades de España, cargando en memoria únicamente la información que necesitemos en cada momento.

En el siguiente esquema se explica el funcionamiento de la aplicación Ajax:

Arquitectura de la aplicación provincias y localidades en Ajax

Esta funcionalidad consta de los siguientes archivos:

  • default.php: página incial dónde se generan dinámicamente el combo de provincias a partir del XML general.
  • xml_data_provider.php: recorre el XML general y devuelve otro XML que contiene sólo las localidades de la provincia escogida.
  • AjaxCode.js:  funcionalidad Ajax que lee el XML con las localidades elegidas y crea dinámicamente el combo de localidades.
  • provinciasypoblaciones.xml: Archivo XML que contiene todas las localidades y provincias de España.

Esta misma funcionalidad puede utilizarla para manejar cualquier XML de gran tamaño que de otra forma se mostraría inmanejable y ralentizaría mucho el tiempo de carga de su Site: fichas de clientes, un catalogo de productos, etc.

El tiempo de carga de una página y el consiguiente tiempo de espera de un usuario es uno de los factores más importantes en el rendimiento de una web. Tal y como se desprende del estudio sobre usabilidad realizado por Peter Sevcik en Julio de 2002, el tiempo de carga de una página no debe dilatarse más de 10 segundos para mantener el nivel de satisfación del usuario dentro de los límites óptimos. A partir de este límite el usuario empieza a percibir que la página está tardando en cargar y cuando se rebasa los 40 segundos la fustración y pérdida de interes del usuario por la página aumenta de manera muy acusada.

El código.

En el siguiente archivo zip dispone de todos los ficheros y recursos que conforman la aplicación. Siéntase libre de utilizarlo en su página web. Si le resultó de utilidad  o encontró cualquier problema le agradecería mucho conocer su feedback.

#javascript #getElementById vs #select by librosweb.es

Fuente: http://librosweb.es/javascript/capitulo_7/utilidades_basicas_para_formularios.html

Las listas desplegables (<select>) son los elementos en los que es más difícil obtener su valor. Si se dispone de una lista desplegable como la siguiente:

<select id="opciones" name="opciones">
  <option value="1">Primer valor</option>
  <option value="2">Segundo valor</option>
  <option value="3">Tercer valor</option>
  <option value="4">Cuarto valor</option>
</select>

En general, lo que se requiere es obtener el valor del atributo value de la opción (<option>) seleccionada por el usuario. Obtener este valor no es sencillo, ya que se deben realizar una serie de pasos. Además, para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:

  • options, es un array creado automáticamente por el navegador para cada lista desplegable y que contiene la referencia a todas las opciones de esa lista. De esta forma, la primera opción de una lista se puede obtener mediante document.getElementById("id_de_la_lista").options[0].
  • selectedIndex, cuando el usuario selecciona una opción, el navegador actualiza automáticamente el valor de esta propiedad, que guarda el índice de la opción seleccionada. El índice hace referencia al arrayoptions creado automáticamente por el navegador para cada lista.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
 
// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
 
// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
 
alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: " + valorSeleccionado);

Como se ha visto, para obtener el valor del atributo value correspondiente a la opción seleccionada por el usuario, es necesario realizar varios pasos. No obstante, normalmente se abrevian todos los pasos necesarios en una única instrucción:

var lista = document.getElementById("opciones");
 
// Obtener el valor de la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
 
// Obtener el texto que muestra la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].text;

Lo más importante es no confundir el valor de la propiedad selectedIndex con el valor correspondiente a la propiedad value de la opción seleccionada. En el ejemplo anterior, la primera opción tiene un value igual a 1. Sin embargo, si se selecciona esta opción, el valor de selectedIndex será 0, ya que es la primera opción del array options (y los arrays empiezan a contar los elementos en el número 0).

Cargar un select o lista desplegable desde otro select PHP + AJAX + MySQL by codigojerry.blogspot.com

Fuente: codigojerry.blogspot.com.es

Para cargar o llenar un select con datos de la base de datos a partir de otro select utilizamos AJAX y el evento onchange de JavaScript. El siguiente ejemplo consta de una base de datos compuesta por dos tablas una llamada continente y otro pais. Cuando se selecciona un continente aparece unos cuantos paises perteneciente a ese continente, para ello las tablas tienen que estar obligatoriamente relacionadas.


El ejemplo está dividio en cuatro archivos:

El archivo conexion para conectarnos a la base de datos.

conexion.php

<?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>

Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax load() cada vez que se hace clic sobre una opcion (continente).

index.php

<?php
include 'conexion.php';
?>
<!DOCTYPE html>

<html>

<head>

<script src="ajax.js"></script>

</head>

<body>

<h2>HTML - PHP - AJAX - MySQL</h2>

<?php

$con=conexion();
$res=mysql_query("select * from continente",$con);

?>

<select id="cont" onchange="load(this.value)">

<option value="">Seleccione</option>

<?php

while($fila=mysql_fetch_array($res)){

?>

<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option>

<?php } ?>

</select>

<div id="myDiv"></div>

</body>

</html>

El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable q y con el método post para que lo procese.

ajax.js

function load(str)
{
var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proc.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+str);
}

Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php

proc.php

<?php
include 'conexion.php';

$q=$_POST['q'];
$con=conexion();

$res=mysql_query("select * from pais where cod_cont=".$q."",$con);

?>

<select>

<?php while($fila=mysql_fetch_array($res)){ ?>
<option><?php echo $fila[nombre]; ?></option>
<?php } ?>

</select>

Demo/Código fuente