values - menú desplegable jQuery multiselect
jquery select selectedindex value (9)
Tengo una lista desplegable de html multi select 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 continuar usando esta lista en caso de que javascript esté deshabilitado; sin embargo, con javaScript me gustaría presentar la lista como una lista desplegable de selección múltiple. Es decir, solo muestra un elemento en la lista hasta que se presiona y luego se expande para mostrar x elementos y proporcionar desplazamiento, donde puedo seleccionar varios elementos como es de esperar mientras sostengo shift o ctrl.
Nuevo en jQuery estaba buscando en http://jquery.com/ pero aún no he encontrado lo que necesito.
Edite usuarios de Struts2, la respuesta seleccionada codificará en URL con [], esto causa problemas en struts2, pero la solución es muy sencilla. Simplemente abra jquery.multiSelect.js y busque "[]" y elimine la instancia única que se usa en una concatenación de cadenas. También estoy usando jQuery 1.4.4 en comparación con el 1.3.2 que viene incluido con él y todo funciona bien.
¿Estás buscando hacer algo como esto? http://jsfiddle.net/robert/xhHkG/
$(''#transactionType'').attr({
''multiple'': true,
''size'' : 10
});
Ponlo en $(function() {...}) u otro onload
Editar
Vuelve a leer tu pregunta, no estás realmente buscando una selección múltiple ... sino un cuadro desplegable que te permite seleccionar múltiples. Sí, probablemente sea mejor utilizar un complemento para eso o escribirlo desde cero, aunque no es un trato de tipo "respuesta rápida".
Eche un vistazo a erichynds dropdown multiselect con una gran cantidad de configuraciones y afinaciones.
Podrías hackear el tuyo, sin depender de los complementos de jQuery ... aunque necesitarías hacer un seguimiento externo (en JS) de los elementos seleccionados, ya que la transición eliminaría la información de estado seleccionada:
<head>
<script type=''text/javascript'' src=''http://code.jquery.com/jquery-1.4.4.min.js''></script>
<script type=''text/javascript''>
$(window).load(function(){
$(''#transactionType'').focusin(function(){
$(''#transactionType'').attr(''multiple'', true);
});
$(''#transactionType'').focusout(function(){
$(''#transactionType'').attr(''multiple'', false);
});
});>
</script>
</head>
<body>
<select id="transactionType">
<option value="ALLOC">ALLOC</option>
<option value="LOAD1">LOAD1</option>
<option value="LOAD2">LOAD2</option>
</select>
</body>
Puedes usar el archivo elegido.i descarga todo el archivo de este enlace Enlace de descarga elegido
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="prism.css" rel="stylesheet" type="text/css" />
<link href="chosen.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="prism.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".chzn-select").chosen();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ion-view view-title="Profile">
<ion-content class="padding">
<div>
<label class="item item-input">
<div class="input-label">Enter Your Option</div>
<select class="chzn-select" multiple="true" name="faculty" style="width:1000px;">
<option value="Option 2.1">Option 2.1</option>
<option value="Option 2.2">Option 2.2</option>
<option value="Option 2.3">Option 2.3</option>
</select>
</label>
</div>
</ion-content>
</ion-view>
</div>
</form>
</body>
</html>
Todos los archivos en la misma carpeta
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 ajuste 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 desea contribuir, consulte el repositorio de github
Utilicé jQuery MultiSelect para implementar el menú desplegable de selección múltiple con la casilla de verificación. Puede ver la guía de implementación desde aquí - Lista desplegable de selección múltiple con casilla de verificación
La implementación es muy simple, solo necesita usar el siguiente código.
$(''#transactionType'').multiselect({
columns: 1,
placeholder: ''Select Transaction Type''
});
Actualización (2017): las siguientes dos bibliotecas se han convertido en las bibliotecas desplegables más comunes que se usan con Javascript. Si bien son jQuery-native, se han personalizado para trabajar con todo desde AngularJS 1.xa tener CSS personalizado para Bootstrap. (Chosen JS, la respuesta original aquí, parece haber caído al # 3 en popularidad).
- Select2: https://select2.github.io/
- Seleccionar: http://selectize.github.io/selectize.js/
Capturas de pantalla obligatorias a continuación.
Respuesta original (2012) : creo que la biblioteca elegida también podría ser útil. Está disponible en versiones jQuery, Prototype y MooTools.
Adjunta hay una captura de pantalla de cómo se ve la funcionalidad de selección múltiple en Elegido.
<select id="mycontrolId" multiple="multiple">
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
var data = "1,3,4"; var dataarray = data.split(",");
$("#mycontrolId").val(dataarray);
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
Agregue el multiselect
$(''#'' + 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");