SelectBox múltiple

Por necesidades del guión, tuve que crear para un trabajo un control de formulario de tipo select de selección múltiple. A diferencia de los select normales, este tenía que permitir selecciones de más de un elemento sin tener que acceder al teclado, y además, adecuarse estéticamente con el diseño de la página, por lo que no me quedó más remedio que hacérmelo.

Su funcionamiento es sencillo. Simplemente hago un recorrido por todos los controles select multiples del documento y los sustituyo por unas listas generadas al vuelo con el DOM de javascript y una pequeña función que permite recorrer el select original y comunicarlo con el nuevo y viceversa.

En esta versión y por necesidades del guión y el tiempo, no recibe los eventos que pudiera tener el select original, aunque si es posible manipular el alto, ancho, posición, y los parámetros left, top, right. botom para cambiar la posición y aspecto.

No depende de ninguna librería y simplemente es necesario incluir el archivo js en el documento.

Evidentemente se puede utilizar en cualquier sitio y para cualquier cosa. También se aceptan sugerencias para mejorarlo

[ descargar ] [ ejemplo ]

14 comentarios.


  • 4 de septiembre de 2012 a las 18:15
    pedro - dice...
    Excelente.
    Muy bue aporte.
    Muchas Gracias
    Pedro Reartes
    Desarrollo Web PHP

  • 23 de octubre de 2012 a las 19:33
    Elisa dice...
    Buenísimo tu aporte! Muchas Gracias!

    • 23 de octubre de 2012 a las 19:37
      Carlos dice...
      Gracias a ti. Espero que te sea de utilidad :)

  • 23 de noviembre de 2012 a las 10:03
    César dice...
    Muchas gracias, me ha sido de mucha utilidad

    • 23 de noviembre de 2012 a las 10:08
      Carlos dice...
      Cesar, un placer que te haya servido :)

  • 27 de diciembre de 2012 a las 15:47
    Walter dice...
    Muchas gracias por el aporte, es precisamente lo que estaba buscado.

    • 27 de diciembre de 2012 a las 15:56
      Carlos dice...
      Un placer. Qué lo disfrutes :)

  • 12 de febrero de 2013 a las 11:30
    Dario dice...
    Me sirvio muchisimo y funciona muy bien
    Gracias por cambiar al aburrido select tradicional en algo mucho mas "lindo" a la vista del usuario
    Saludos!!!

    • 12 de febrero de 2013 a las 16:30
      Carlos dice...
      Darío, gracias a ti por usarlo ;)

      Un saludo,
      Carlos.

  • 1 de abril de 2013 a las 17:42
    Turamarth dice...
    Ante todo muchas gracias por compartir este gran script, yo estoy empezando con javascript y jquery y me ahorraste mucho dolor de cabeza con el.

    Ya que aceptas sugerencias para mejorarlo, una buena opcion seria tener la posiblidad de limitar el maximo de elementos selecionados.

    Saludos

    • 2 de abril de 2013 a las 0:18
      Carlos dice...
      Gracias a ti por usarlo y por darle utilidad. Aunque tengo este script algo olvidado, tendré en cuenta tu sugerencia y veré de rehacerlo (todo se puede mejorar) con esa opción como novedad.

      Un saludo y gracias por tu comentario,
      Carlos

  • 3 de mayo de 2013 a las 0:45
    Roberto dice...
    ayuda, funciona correctamente en IE 9, ayuda por favor

  • 3 de mayo de 2013 a las 0:47
    Roberto dice...
    No funciona en IE9, y hay forma de , que al mandarlo por POST, guarde el arreglo de los option selecionados, ayuda ...

  • 24 de mayo de 2013 a las 15:03
    Carlos dice...
    Hola Roberto, es probable que haya alguna función que sea incompatible con el motor de js de explorer. En cuanto tenga un momento le echo un vistazo
Deja tu comentario