HTML - JavaScript: Seleccionar Todos los Valores de un Campo Select con JavaScript

Anteriormente en el post "Enviar las opciones de un campo select HTML a otro con JavaScript" analizamos como se debe realizar la operación para pasar los valores de un campo select a otro, pero como me comento DEpelOxD_roCket me falto explicar como se deben seleccionar los valores del select para ser enviados en el formulario al concluir la operación. A continuación explicaré como seleccionar todos los valores de un campo select utilizando javascript. Este mismo procedimiento es utilizado para la enviar los campos del select en el post anterior.

Lo primero que debemos hacer es crear el campo select con la opción multiple con el id campos_seleccionados como se observa a continuación.

<select id='campos_seleccionados' name='Seleccionados' size='5' MULTIPLE style='width: 225px;' >

<option value='mesa'>mesa</option>

<option value='silla'>silla</option>

<option value='plato'>plato</option>

</select>

En este caso ninguna de las opciones del select se encuentra seleccionada por lo cual al presiona el botón enviar del formulario no se recibirá ningún dato.

Para que todos los campos del select queden seleccionados se debe crear una función en javascript que reciba el id del campo select campos_seleccionados, para recuperar el objeto select con todas las opciones, sin importar si estas se encuentran seleccionadas o no. Luego se realiza un for que recorrá todas las opciones del select y por cada una de ellas se asigna el valor true a la propiedad selected de la opción. En la siguiente imagen se puede observar la función javascript que realizará toda esta operación.

<script language="javascript">

function selected_all(select_id){

obj=document.getElementById(select_id);

for(var i = 0; i < obj.options.length; i++){

obj.options[i].selected = true;

}

}

</script> 

Por último nos debemos asegurar que cada vez que se envíen los datos del formulario todas las opciones del campo select queden seleccionadas, para esto debemos indicarle al formulario que antes de enviar los datos se debe ejecutar la función javascript que se describió anteriormente. Para esto debemos asignar la opción submit al formulario y en ella debemos indicarle que se ejecute la función selected_all como se puede observar en la siguiente línea.

<form name='form' id='form' method='post' action='nuevo_script.php' submit=return selected_all('campos_seleccionados')>

Al completar todos estos pasos puedes enviar todos las opciones de un campo select sin necesidad de seleccionar ninguno.

"Gracias, por compartir tus conocimientos"

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.