HTML - JavaScript: Enviar las opciones de un campo select HTML a otro con JavaScript

El campo select de HTML permite enviar un parámetro de las opciones que el formulario tiene disponible. El campo select puede ser modificado para seleccionar más de una opción indicando que se trata de un select multiple.

Para este ejemplo veremos como enviar las opciones seleccionadas en un campo select a otro para luego enviarlas a un script php.

Primero se deben crear los dos select junto con los botones encargados de realizar el cambio de los parámetros de un select a otro.

<select name=”disponibles” multiple=”multiple” size=”4” id=”disponible”>

<option value=”1”>1</option>

<option value=”2”>2</option>

<option value=”3”>3</option>

</select>

</button type=”button” onclick=”pasar_parametro('disponible','seleccionado')”> >> </button>

</button type=”button” onclick=”pasar_parametro('seleccionado','disponible')”> << </button>

<select name=”seleccionados” multiple=”multiple” size=”4” id=”seleccionados”>

<option value=”4”>4</option>

<option value=”5”>5</option>

</select>

Es importante para el ejemplo que el select tenga las opciones size con valor >= 2 y debe contener el id pues lo utilizaremos para poder reconocer cual es el select seleccionado, a demás ese es el valor que se entrega a la función como parámetro.

• name: Nombre del campo select, se puede utilizar para capturar el valor del campo en el JavaScript.
  • getElementsByName: Permite acceder a una lista de elementos que tengan el nombre ingresado como parámetro.
• id: Identificador del campo select, se puede utilizar para capturar el valor del campo en el JavaScript.
  • getElementById: Permite obtener la referencia a un elemento de la página mediante el id del elemento.
• size: Permite que el select despliegue varias opciones a la vez, en lugar de ser un select desplegable.
• multiple: Permite realizar selecciones multiples sobre el campo select.

Ahora que tenemos los campos select y las opciones necesarios para realizar el cambio de opciones de un select a otro, se presenta el JavaScript que realiza el traspaso de opciones.

Function pasar_parametro(origen_id, destino_id){

obj = document.getElementById(origen_id);

if(obj.selectedIndex == -1){

return;

}

valor = obj.value;

txt = obj.options[obj.selectedIndex].text;

obj.options[obj.selectedIndex] = null;

obj2 = document.getElementById(destino_id);

opc = new Option(txt, valor);

eval(obj2.options[obj2.options.length] = opc);

return false;

}

La función anterior recibe como parámetros los ids del select origen (desde donde se cortará la opción seleccionada de campo select) y el valor destino (hacia donde se copiará la opción).

Luego se obtiene el objeto que contiene el select origen, se consulta si el índice de la opción seleccionada es igual a -1, de ser verdadero se retorna de la función debido a que no existen opciones seleccionadas. De lo contrario continúa la ejecución del JavaScript obteniendo el valor de la opción seleccionada en el select origen y se debe recuperar el texto de la opción seleccionada en el select origen, finalizando las operaciones sobre el select origen con la eliminación de la opción seleccionada.

El siguiente paso es obtener el objeto que contiene el select destino, se crea un objeto opción con los argumentos texto y valor, para finalmente utilizando la función eval que nos permite evaluar un texto como si se tratará de código JavaScript agregar el objeto opción al objeto select destino con un índice igual al último índice más uno.

Por ultimo la función retorna el valor false.

Nota: Esta función copia solo una de las opciones seleccionadas aún cuando existan varias opciones origen seleccionadas.

Nota: Para ver como se deben seleccionar todos los datos del campo select destino y poder enviarlo a través del formulario puede visitar el post Seleccionar Todos los Valores de un Campo Select con JavaScript.