JQuery: asmselect

asmSelect es un plugin de jQuery que nos trae una mejora en la interacción con los select múltiples, oculta automáticamente el elemento select múltiple original y en su lugar muestra una lista de las opciones seleccionadas.

Características:

- es de fácil uso, muy intuitivo
- no es necesario modificar tu código al agregar el plugin.
- si un usuario no tiene javascript activo, entonces el select multiple trabajara con normalidad.
- no se requiere que el usuario presione las combinaciones de teclas [Ctrl-Click] ó [Shift-Click] para seleccionar los elementos. El usuario puede agregar o quitar elementos de forma individual, sin riesgo de perder los que ya han sido seleccionados.
- los elementos seleccionados son siempre visibles (dentro de los límites de su interfaz), mientras que los elementos no seleccionados siempre están ocultos (dentro del select múltiple del cual se origina la lista).
- los items se pueden ordenar.

 Como se puede observar, en la lista van apareciendo los items seleccionados y siempre se pueden eliminar si ya no se desean, el plugin es completamente configurable, puedes cambiar el idioma, permitir que se ordenen los elementos de la lista una vez agregados, modificar el estilo, etc.

descarga

Uso:

1.- se incluye el jquery, el plugin y el estilo correspondiente.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.asmselect.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.asmselect.css" />

2.-se configura el plugin:

<script type="text/javascript">
   $(document).ready(function() {
     $("select[multiple]").asmSelect();
  }); 

3.- asignando propiedades a los elementos involucrados.

<select name="mi_select" multiple="multiple" title="-- seleccione un elemento de la lista">
...
</select>

Principales propiedades:

- sortable: permite al usuario arrastrar y soltar para ordenar la lista de elementos que ha seleccionado. Por defecto es false.

- highlight: permite mostrar un mensaje cuando se agrega o se elimina un elemento d el alista. Por defecto es false.

- animate: permite animar la lista al agregar o eliminar un item. Por defecto es false.

- addItemTarget: permite indicar donde colocar el nuevo item seleccionado, recibe los valores (top (al inicio) ó bottom (al final)). Por defecto es bottom.

Ejemplo de uso:

$(document).ready(function() {
    $("select[multiple]").asmSelect({
        sortable: true,
        animate: true,
        addItemTarget: 'top'
    });
});