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. 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. 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. 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.
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»,»…») 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:
La función tiene el siguiente código. Está comentado para que se pueda entender mejor. function cambia_provincia(){
|
Leave A Comment