¿Como seleccionar varios elementos de un “select” multi-seleccionable sin usar la tecla Control (en Javascript)?

"Select" con el atributo "multiple" activo

"Select" con el atributo "multiple" activo

Cuando programas con HTML, usar Javascript dentro de tu código puede ser tu solución o tu perdición. Pero en muchos casos, suele ayudarte en tareas que van más allá de lo que nos ofrece el HTML. Y más aun cuando tratas de hacer algo dinámico, con algo de 2.0, pues es obligatorio.

Imaginaros que tenéis una etiqueta “select“, con el atributo “multiple” activo, lo que os permite seleccionar varios elementos de esta selección a la vez como muestra la imagen de la derecha. Pero esto no es tan sencillo, ya que para seleccionar varios de estos elementos (o “options“) tenemos que pulsar la teclar “Ctrl” a la vez que pinchamos encima.

¿Ctrl + ratón?, estamos locos… “, esto es lo que pensó uno de los usuarios que probó una aplicación que estábamos desarrollando, por lo que nos tocó hacerlo más intuitivo, es decir, sólo usar el click del ratón para que el usuario no se haga un lío.

Para realizar esto, tienes que añadir a tu “select” un nuevo atributo “onChange“, que se disparará cuando haya un cambio dentro del control generado:

<select multiple="multiple" id="lbZonas" onChange="select_OnChange();">

Al ocurrir un cambio, lanzaremos la función “select_OnChange“. Entonces, solo tenemos que añadir este código y tendremos lo que buscamos:

// Array donde almacenaremos los elementos seleccionados
var aSelected = new Array();
// Puntero al control seleccionado
var multiList_Select;
// Busco el control que quiero monitorizar
// y lo dejo guardado en nuestro puntero
if (document.getElementById)
{
    // Pon el ID que tenga tu etiqueta "select"
    multiList_Select = document.getElementById("lbZonas");
}
else
{
    for (var iList=0; iList<document.forms.length; iList++)
    {
      var oForm = document.forms[iList];
      if (oForm.multiList)
       {
           multiList_Select = oForm.multiList;
       }
    }
}

// Inicializo el array con los valores que
// estan seleccionados en el control
function select_Init()
{
    for (var iList=0; iList<multiList_Select.options.length; iList++)
    {
        aSelected[iList] = multiList_Select.options[iList].selected;
    }
}

// Esta funcion se ejecuta cada vez que hay un cambio
// y selecciona todos los elementos anteriormente seleccionados
// y el nuevo en el que se ha hecho click. En el caso que ya estubiera
// seleccionado, sencillamente lo pone a falso en el array
function select_OnChange()
{
    var theIndex = multiList_Select.selectedIndex;
    aSelected[theIndex] = !aSelected[theIndex];

    for (var iList=0; iList<multiList_Select.options.length; iList++)
    {
        multiList_Select.options[iList].selected = aSelected[iList];
    }
}
// Esto se lanza solo una vez, y inicializa el array
select_Init();

Solo existe un problema, que se nota algo en Firefox y es un pequeño parpadeo cada vez que se selecciona un elemento, y realmente no se como solucionarlo, pero el problema es bastante pequeño y aceptable. Aunque si conocéis alguna solución soy todo oídos :).

select
Please follow and like us:

2 pensamientos en “¿Como seleccionar varios elementos de un “select” multi-seleccionable sin usar la tecla Control (en Javascript)?

  1. Pingback: Bitacoras.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *