Feeds:
Entradas
Comentarios

Archive for the ‘Javascript’ Category

Select dinámico

I. Introducción 

En el siguiente artículo os muestro como crear un <select> múltiple dinámico. Es decir, un campo “<select>” dentro de un formulario que, mediante dos “flechitas” puedo ir modificando dinámicamente los campos cambiando el orden de los mismos. El concepto se ve mucho mejor con una imagen:

 

Select dinámico

 

Como se puede observar, la imagen consta de dos partes:

  • Un campo <select> múltiple.

  • Dos flechas de dirección.

La primera parte consiste en un listado de las opciones que nosotros queramos mostrar. Por ejemplo, si queremos evaluar a alguien con una pregunta de “Ordena de menor a mayor” o similar, este ejemplo podría ser muy ilustrativo.

La segunda parte consta de dos flechas a través de las cuales, vamos cambiando de posición la opción seleccionada en el <select>.

  

II. Desarrollo del código

Dividiré la explicación en dos grandes bloques:

Select múltiple

<select name=”orden_bloque” multiple>
<option selected value=”0″>Planeta Tierra</option>
<option value=”1″>Galaxia</option>
<option value=”2″>Andalucía</option>
<option value=”3″>Hemisferio Norte</option>
<option value=”4″>Universo</option>
</select>

Es importante aplicar a cada <option> un valor. De forma que los valores van asignándose del 0 al máximo del número de campos elegidos.

Por último, cabe destacar que se le ha dado un nombre al <select> a través de la etiqueta name

Flechas

<input type=”button” value=”<<” onclick=” 
          ind=formu.orden_bloque[formu.orden_bloque.selectedIndex].value;
          if(ind>0){
                    nombre_1=formu.orden_bloque[ind].text;
                    nombre_2=formu.orden_bloque[ind-1].text;
                    formu.orden_bloque[ind].text=nombre_2;
                    formu.orden_bloque[ind-1].text=nombre_1;
                    formu.orden_bloque.selectedIndex=ind-1;
          }
“>

La primera flecha se caracteriza por un onclick. Esto quiere decir que cuando nosotros hagamos click en ese botón ocurrirá lo que hemos definido a continuación:

ind=formu.orden_bloque[formu.orden_bloque.selectedIndex].value;

ind indicará el valor de la opción seleccionada. Hacemos referencia al valor value que asignamos cuando creamos el select múltiple. formu es el nombre que se le ha dado al formulario en su declaración: <form name=”formu” method=”post”>

Antes de continuar, compruebo que ind sea mayor que cero porque si nos encontramos en la opción más baja, si le damos a la flecha de bajar, no debe realizar ninguna acción.

En el caso de que ind sea mayor que cero:

nombre_1=formu.orden_bloque[ind].text; 

Asigno el contenido de la opción seleccionada con el select en nombre_1

nombre_2=formu.orden_bloque[ind-1].text;

Asigno el contenido de la opción anterior a la seleccionada con el select en nombre_2

formu.orden_bloque[ind].text=nombre_2; 

Indico que la posición actual seleccionada será la anterior a la elegida. Es decir, coloco el nombre_2 donde antes estaba nombre_1.

formu.orden_bloque[ind-1].text=nombre_1;

A la posición anterior a la elegida le asigno el nombre_1.  De esta forma, ya he intercambiado los valores.

formu.orden_bloque.selectedIndex=ind-1;

Lo que falta sería marcar como opción seleccionada la que corresponde a nombre_1.

El procedimiento en la flecha contigua sería similar pero considerando que ahora el campo seleccionado lo movemos “hacia abajo”:

<input type=”button” value=”>>” onclick=” 
          ind=formu.orden_bloque[formu.orden_bloque.selectedIndex].value;
          max=document.formu.orden_bloque.length-1;
          if(ind<max){
                     nombre_1=formu.orden_bloque[ind].text;
                     nombre_2=formu.orden_bloque[ind-(-1)].text;
                     formu.orden_bloque[ind].text=nombre_2;
                     formu.orden_bloque[ind-(-1)].text=nombre_1;
                     formu.orden_bloque.selectedIndex=ind-(-1);
          }
“>

La primera línea hace lo mismo que con la anterior flecha. Es decir, seleccionar el valor de la opción seleccionada en ese momento:

ind=formu.orden_bloque[formu.orden_bloque.selectedIndex].value;

En ind almacenamos lo ya comentado. Ahora bien, solo se procederá a realizar las operaciones siguientes siempre y cuando no se haya alcanzado el máximo (almacenado en la variable max)

nombre_1=formu.orden_bloque[ind].text;
nombre_2=formu.orden_bloque[ind-(-1)].text;

En realidad hacemos lo mismo que antes pero ahora almacenando en nombre_2 el valor de la siguiente opción a la seleccionada.

formu.orden_bloque[ind].text=nombre_2;
formu.orden_bloque[ind-(-1)].text=nombre_1;
formu.orden_bloque.selectedIndex=ind-(-1);

En este bloque realizamos un procedimiento análogo a lo ya explicado. Cambiamos el contenido en el formulario y hacemos que la opción seleccionada sea la siguiente a la que estaba.

  

III. Referencias

Read Full Post »