Elementos de formulario select asociados

  • Por
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.

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.

La función tiene el siguiente código. Está comentado para que se pueda entender mejor.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Matias

20/1/2004
Estaria bueno que cuando seleccionamos la segunda opcion salte a alguna pagina en donde muestre el contenido de esa opcion.

Jose Cavieres

09/2/2004
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.

Jonathan

12/3/2004
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

JOSE SASTRE

16/9/2004
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.

Fernando Reyes

14/1/2005
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 ")";

Ignacio

31/3/2005
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.

SOS

19/10/2009
consulta sobre su ejemplo
Buenas,

Estoy viendo su ejemplo, pero no sé donde tengo que incluir:

var provincias_1=...

debo incluirlo en una página que es llamada con REQUIRE (por ejemplo)...
y la función cambia_pronvincia() debe de estar en la misma página...
El problema es que me da error cuando empiece a leer la línea (esté donde esté:

var provincias_1=...

Te agradezco mucho tu ayuda y paciencia.

Saludos

SOS

19/10/2009
ya encontré el problema!!! era fallo mio... disculpad las molestias ;))
ya encontré el problema!!! era fallo mio... disculpad las molestias ;))

javier

16/2/2010
Comentario
Esto mismo se podra sacar desde una base de datos y traabajarlo con asp y javascript

pero bueno, esta bueno el tema... e buscado varios temas de este tipo y creo que este es el mejorcito , coomenzare a trabajar con el....

gracias

eduardo

21/5/2010
hola
esta bien tu codigo una pregunta se podra hacer interacturar un checkbox con un select a la vez que diga el
selected=mensaje maracado para que ese mensaje marcado significo check box marcado
selected=Todos los Mensajes para que ese mensaje marcado significo check box no marcado y marcado borrar todos
selected=Mensaje no Marcados para que ese mensaje marcado significo check box no marcado

EduardoStark

21/5/2010
muy bueno
esta bien tu codigo una pregunta se podra hacer interacturar un checkbox con un select a la vez que diga el
selected=mensaje maracado para que ese mensaje marcado significo check box marcado
selected=Todos los Mensajes para que ese mensaje marcado significo check box no marcado y marcado borrar todos
selected=Mensaje no Marcados para que ese mensaje marcado significo check box no marcado

Mario

27/9/2010
Ajax
Muy Buen Ejemplo...Aunque Tengo Una Duda..
Como quedaria este ejercicio aplicado en Ajax...es decir trayendo las respuestas en XML

Rodrhigo

15/2/2011
Excelente
Gracias man. se paso para buena este ejemplo.
si ubiese sido necesario registrarme para agradecerte de seguro lo ubiera hecho.

simplemente excelente.

Xexu

26/2/2011
Redundancia de código
Tengo una duda:

En la función cambia_provincia() dentro del for, la linia de código que dice:

document.f1.provincia.options[i].value=mis_provincias[i]

¿¿No es redundante?? A mi me compila igual sin esa linia ¿Qué diferencia hay?

Gracias

sandra

10/7/2011
aplicación a base de datos y ajax
Hola intento generar el select a partir de datos traidos de una base de datos. Acabo de empezar con esto y aún hay muchas cosas que se me escapan. Alguién puede hecharme una mano y decirme porque al intentar ejecutar esta función me sale el herror de "document.dates is undefined", este es el código que intento usar, gracias:
function get_iframelink(placename){
var form = '<form name="dates" method="get" > fecha: <select name="link" onchange="get_video(this.form)", onfocus="get> <option value=""></option></select></form>';
get_link();
return form;

}

function get_link(form){

$.ajax({
url: "get_iframe.php",
type: "GET",
data: ({
"placename": placename
}),
dataType: "html",
success: function(_msg){

alert(_msg);

for (i = 0; i < _msg.length; i++) {


document.dates.link.options[i].value = _msg[i]
document.dates.link.options[i].text = _msg[i]


};
}
})
}

francisco cordoba

27/11/2011
select en cascada
necesito un codigo para ir filtrando mediante select, la idea seria la siguiente:

segun la primera seleccion
me cambie la segunda seleccion
segun la segunda seleccion
me cambie la tercera seleccion

y por ultimo un select que al seleccionar una opcion de el me cambie el fondo de la pagina.

agradeceria la ayuda ya que la necesito urgente.

saludos.

Jezsica

19/3/2014
¿?
perdona mi ignorancia, ya vi como esta que en el value se ponen numeros pero a la hora de enviarlos a la base de datos como podria guardar en la base los paises y no los numeros ya lo intente y no pude

Sorca

23/7/2014
Select en script
Me gusto mucho y lo puse en practica, en un script pero en el formulario que utilizo necesito hacer en 4 secciones y solo me jala el primer script, los otros script lo cambie de nombre pero no se pq no me funciona si me puedes ayudar estaría muy agradecida...!!!

Ilatsi

09/11/2014
Seleccion del ejemplo
Estuve checando tu ejemplo y esta muy bien, pero como hacer para que se aguarde en una base de datos

Yon

05/8/2015
Cuando pongo un pais que tiene un espacion en blanco no funciona
Cuando dejo un espacio en blanco entres los paises no funcionas el scrint
por ejemplo:

var provincias_Estados Unidos

Pedro Caro

06/8/2015
Quien copia a quien
http://www.webtaller.com/construccion/lenguajes/javascript/lecciones/elementos-formulario-select-asociados-javascript.php

Alejandro

01/12/2015
select dependiente
Buena noche

Hola, realice el ejemplo que me diste en un proyecto que estoy realizando para lograr graduarme, y me funciono muy bien, pero tengo un inconveniente, y es que a la hora de que me seleccione otro select, escogiendo el primero, no se como hacerlo.
ejemplo: país- Colombia, provincia-Cali, Barrio-La Campiña
como haría para que saliera ese tercer select con tan solo elegir el primero, con el código que nos diste de ejemplo.

mi correo es jlandazuri8@misena.edu.co
A quien me pueda colaborar.

muchas gracias

oscar

14/9/2016
Algo similar...
Excelente el código! El problema que tengo es que, en mi sitio web, mi primer select tiene 200 artículos (no 4) y, al seleccionar uno de ellos (digamos, "cuaderno"), yo quiero que en el segundo select obtenga automaticamente el peso, en gramos, de 1 cuaderno, 2 cuadernos, etc. Veo que la solución así planteada sería inviable (en total son más de 2000 artículos, en diferentes selects de distintas páginas).
Es evidente que tengo que tener el peso por cuaderno en una constante js y luego hacer un cálculo, e insertar el valor de las variables en el segundo select y no veo bien como podría hacer esto. Tengo la idea, pero no se bien como llevarla a cabo. Saludos y gracias de antemano.