0
294
Vistasmenú desplegable de selección múltiple de jQuery
Tengo una lista desplegable de selección múltiple html simple:
<select id="transactionType" multiple="multiple" size="10"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option> <!-- etcetera... --> </select>Quiero seguir usando esta lista en caso de que javascript esté deshabilitado; sin embargo, con javaScript me gustaría representar la lista como una lista desplegable de selección múltiple. Es decir, solo muestra un elemento en la lista hasta que se hace clic y luego se expandirá para mostrar x elementos y proporcionar desplazamiento, donde puedo seleccionar varios elementos como cabría esperar mientras mantengo presionada la tecla shift o ctrl.
Nuevo en jQuery estaba buscando en http://jquery.com/ pero aún no he encontrado lo que necesito.
Edite a los usuarios de Struts2, la respuesta seleccionada se codificará en URL con [], esto causa problemas en struts2, sin embargo, la solución es muy fácil. Simplemente abra jquery.multiSelect.js y busque "[]" y elimine la única instancia que se usa en una concatenación de cadenas. También estoy usando jQuery 1.4.4 en lugar de 1.3.2 que viene incluido y todo funciona bien.
3 Respuestas
Responde la pregunta0
Actualización (2017): Las siguientes dos bibliotecas ahora se han convertido en las bibliotecas desplegables más comunes que se usan con Javascript. Si bien son nativos de jQuery, se han personalizado para que funcionen con todo, desde AngularJS 1.x hasta tener CSS personalizado para Bootstrap. (Chosen JS, la respuesta original aquí, parece haber caído al número 3 en popularidad).
- Seleccionar2: https://select2.github.io/
- Seleccionar: http://selectize.github.io/selectize.js/
Capturas de pantalla obligatorias a continuación.
Seleccionar2: 
Seleccionar: 
Respuesta original (2012) : creo que la biblioteca Chosen también podría ser útil. Está disponible en versiones jQuery, Prototype y MooTools.
Se adjunta una captura de pantalla de cómo se ve la funcionalidad de selección múltiple en Chosen.
0
También estaba buscando una selección múltiple simple para mi empresa. Quería algo simple, altamente personalizable y sin grandes dependencias aparte de jQuery.
No encontré uno que se ajustara a mis necesidades, así que decidí codificar el mío.
Lo uso en producción.
Aquí hay algunas demostraciones y documentación: loudev.com
Si quieres contribuir, revisa el repositorio de github
0
Descargar jquery.multiselect
Incluya los archivos jquery.multiselect.js y jquery.multiselect.css
<script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />Complete su entrada seleccionada
Añadir la selección múltiple
$('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });Puedes cambiar el estilo
ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }Si desea volver a llenar la selección, debe actualizarla:
$('#' + Field).multiselect('refresh');Para obtener los valores seleccionados (separados por comas):
var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();Para borrar todos los valores seleccionados:
$('#' + Field).multiselect("uncheckAll");