sábado, 26 de mayo de 2012

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"