 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Elementos de formulario select asociados
Cómo hacer con Javascript que un elemento de formulario select cambie sus opciones cuando cambie otro elemento select de la página. De modo que cada opción de un select tenga un grupo de opciones posibles para el otro select.
01/10/03 - Vamos a conocer uno de los trucos más solicitados de Javascript, que tiene mucha relación con el tema de formularios y donde se utiliza el evento onchange de Javascript. Es un ejemplo sobre cómo realizar una página con un par de selects donde, según el valor escogido en uno de ellos, cambien las opciones posibles del otro select.
Lo mejor para ver lo que vamos a hacer es ver una página web donde se muestra en funcionamiento el script. Para ver su funcionamiento debemos cambiar la selección del primer select y comprobaremos como las opciones del segundo select cambian automáticamente.
El ejemplo que hemos ilustrado utiliza provincias y países. Al escoger en el primer select un país, en el segundo debe mostrarnos las provincias de ese país para que escojamos una provincia, pero sólo una que tenga que esté en el país seleccionado en primer término.
Conocer el objeto select y los option
Es importante conocer los objetos de formulario select y los option. Los select corresponden con las cajas de selección desplegables y los option con cada una de las opciones de la caja desplegable. Podemos ver un artículo que habla de ello.
En concreto nos interesa hacer varias cosas que tienen que ver con extraer el valor de un select en cualquier momento, fijar su número de opciones y, para cada opción, colocar su valor y su texto asociado. Todo esto aprenderemos a hacerlo en este ejemplo.
| Referencia: Para conocer el trabajo con formularios y la jerarquía de objetos javascript (Todo eso es la base del trabajo con los elementos de las páginas en Javascript) debemos haber leer el manual de Javascript II. |
Modo de llevar a cabo el problema
Para empezar, vamos a utilizar un formulario con dos selects, uno para el país y otro para la provincia.
<form name="f1">
<select name=pais onchange="cambia_provincia()">
<option value="0" selected>Seleccione...
<option value="1">España
<option value="2">Argentina
<option value="3">Colombia
<option value="4">Francia
</select>
<select name=provincia>
<option value="-">-
</select>
</form>
Nos fijamos en el select asociado al país de este formulario que, cuando se cambia la opción de país, se debe llamar a la función cambia_provincia(). Veremos más adelante esta función, ahora es importante fijarse que está asociada al evento onchange que se activa cuando cambia la opción en el select.
Todo lo demás será código Javascript. Empezamos definiendo un montón de arrays con las provincias de cada país. En este caso tenemos sólo 4 países, entonces necesitaré 4 arrays. En cada array tengo la lista de provincias de cada país, colocada en cada uno de los elementos del array. Además, dejaré una primera casilla con un valor "-" que indica que no se ha seleccionado ninguna provincia.
var provincias_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...")
var provincias_2=new Array("-","Salta","San Juan","San Luis","La Rioja","La Pampa","...")
var provincias_3=new Array("-","Cali","Santamarta","Medellin","Cartagena","...")
var provincias_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...")
Hay que fijarse que los índices del array de cada país se corresponden con los del select del país. Por ejemplo, la opción España, tiene el valor asociado 1 y el array con las provincias de España se llama provincias_1.
El script se completa con una función que realiza la carga de las provincias en el segundo select. El mecanismo realiza básicamente estas acciones:
- Detecto el país que se ha seleccionado
- Si el valor del país no es 0 (el valor 0 es cuando no se ha seleccionado país)
- Tomo el array de provincias adecuado, utilizando el índice del país.
- Marco el número de opciones que debe tener el select de provincias
- Para cada opcion del select, coloco su valor y texto asociado, que se hace corresponder con lo indicado en el array de provincias.
- SI NO (El valor de país es 0, no se ha seleccionado país)
- Coloco en el select de provincia un único option con el valor "-", que significaba que no había provincia.
- Coloco la opción primera del select de provincia como la seleccionada.
function cambia_provincia(){
//tomo el valor del select del pais elegido
var pais
pais = document.f1.pais[document.f1.pais.selectedIndex].value
//miro a ver si el pais está definido
if (pais != 0) {
//si estaba definido, entonces coloco las opciones de la provincia correspondiente.
//selecciono el array de provincia adecuado
mis_provincias=eval("provincias_" + pais)
//calculo el numero de provincias
num_provincias = mis_provincias.length
//marco el número de provincias en el select
document.f1.provincia.length = num_provincias
//para cada provincia del array, la introduzco en el select
for(i=0;i<num_provincias;i++){
document.f1.provincia.options[i].value=mis_provincias[i]
document.f1.provincia.options[i].text=mis_provincias[i]
}
}else{
//si no había provincia seleccionada, elimino las provincias del select
document.f1.provincia.length = 1
//coloco un guión en la única opción que he dejado
document.f1.provincia.options[0].value = "-"
document.f1.provincia.options[0].text = "-"
}
//marco como seleccionada la opción primera de provincia
document.f1.provincia.options[0].selected = true
}
Podemos ver una página con el ejemplo en funcionamiento.
Seguir navegando a partir aquí:
+ 2 manuales relacionados+ 1 categoria relacionada
+ 6 comentarios (Añadir)
+ 21 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Taller de Javascript
Dentro de Programación en Javascript II
Siguiente: Evento onunload de Javascript
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript Comentarios de los visitantes
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 6 comentarios revisados |
Comentario de Matias
20/1/04
Estaria bueno que cuando seleccionamos la segunda opcion salte a alguna pagina en donde muestre el contenido de esa opcion.
Comentario de Jose Cavieres
09/2/04
Saben??? les tengo un reto traten de utilizar esta forma poniendose en el caso de un formulario con datos para 2 listas de paises y 2 listas de ciudades, si las quieren hacer llenar al onLoad, llamense la funcion 2 veces jajajajaja!!!! por eso recomiendo usar newOption, es igual de rapido y no dá problemas.
Comentario de Jonathan
12/3/04
Estaría bien si las opciones de los Array tambien arrojaran valores numéricos igual que la opción PAIS.
Digamos para que en lugar de enviar un campo texto se envíe un int que pueda servir para una base de datos relacional
Digamos para que en lugar de enviar un campo texto se envíe un int que pueda servir para una base de datos relacional
Comentario de JOSE SASTRE
16/9/04
La utilidad está muy bien, pero no contempla el caso más frecuente que es cuando el número de ítem de cada select es variable y no conocido de antemano, por ejemplo cuando proceden de una base de datos cuyo contenido varía con frecuencia. Por ejemplo: en un selectec aparecen empresas y en el otro los empleados de la empresa seleccionada.
Comentario de Fernando Reyes
14/1/05
Yo utilice como base este tutorial que esta bastante bueno, pero las variables las saque desde una base de datos...
Lo unico que modifique es cuando se crean los arreglos, ahi mezcle un poco de php y quedo bastante bueno.
echo "<script>";
$result = mysql_query("SELECT id FROM Secciones WHERE activo='1' ORDER BY tipo ASC");
while($row = mysql_fetch_array($result))
{
echo "var subsecciones_".$row[id]." =new Array('-'";
$result2 = mysql_query("SELECT nombre FROM Subsecciones WHERE activo='1' and id_seccion = '$row[id]' ORDER BY nombre ASC");
while($row2 = mysql_fetch_array($result2))
{
echo ", '$row2[nombre]'";
}
echo ")";
Lo unico que modifique es cuando se crean los arreglos, ahi mezcle un poco de php y quedo bastante bueno.
echo "<script>";
$result = mysql_query("SELECT id FROM Secciones WHERE activo='1' ORDER BY tipo ASC");
while($row = mysql_fetch_array($result))
{
echo "var subsecciones_".$row[id]." =new Array('-'";
$result2 = mysql_query("SELECT nombre FROM Subsecciones WHERE activo='1' and id_seccion = '$row[id]' ORDER BY nombre ASC");
while($row2 = mysql_fetch_array($result2))
{
echo ", '$row2[nombre]'";
}
echo ")";
Comentario de Ignacio
31/3/05
Vi varios modelos sobre este tema... y este fue el que más me gusto.
Me gustaría que pasen este tema a recojer los arrays con datos tomados de una base de datos con PHP.
Saludos.
Me gustaría que pasen este tema a recojer los arrays con datos tomados de una base de datos con PHP.
Saludos.
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
