Tengo un html simple multi seleccione de la lista desplegable:

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

Yo quiero continuar con el uso de esta lista en el caso de que javascript está deshabilitado sin embargo con javaScript me gustaría hacer la lista como un multi-seleccione de la lista desplegable. Que es sólo se muestra un elemento en la lista hasta que se hace clic en y, a continuación, se expandirá para mostrar elementos x y proporcionar el desplazamiento, en el que puede seleccionar varios elementos como sería de esperar mientras se mantiene la tecla mayús o ctrl.

Nuevo a jQuery se ha de buscar en la http://jquery.com/ pero que todavía no han encontrado lo que necesito.

Editar Struts2 los usuarios, la respuesta seleccionada será url encode con [] en esta causa problemas en struts2 la revisión, sin embargo, es muy fácil. Simplemente abra jquery.multiSelect.js y la búsqueda para «[]» y eliminar la instancia de uno se utiliza en forma de concatenación de cadenas. Yo también estoy usando jQuery 1.4.4 como contraposición a la 1.3.2, que vino incluido con el y todo funciona bien.

  • Creo que usted podría estar buscando en el lugar equivocado — que es el trabajo adecuado para un plugin o un jQuery UI widget. plugins.jquery.com y jqueryui.com podría empezar.
  • Hace esto lo que estás buscando?
  • Sólo a partir de jQuery he encontrado todas las soluciones propuestas útil, pero el proyecto de Ley N solución está muy cerca de lo que yo quería visualmente, pero en realidad es incluso yo poco más ‘cool’ de lo que yo quería (me refiero a las casillas de verificación, yo estaría bien en un plano de resaltado de los elementos).
InformationsquelleAutor Quaternion | 2011-01-20

9 Comentarios

  1. 82

    Actualización (2017): Los siguientes dos bibliotecas se han convertido en el más común desplegable bibliotecas usadas con Javascript. Mientras están jQuery-nativo, se han personalizado para trabajar con todo lo que de AngularJS 1.x para tener custom CSS de Bootstrap. (Elegido por JS, el original de la respuesta aquí, parece haber disminuido a #3 en popularidad.)

    Obligatorio capturas de pantalla a continuación.

    Select2:
    jQuery multiselect menú desplegable

    Selectize:
    jQuery multiselect menú desplegable


    Respuesta Original (2012): creo que el Biblioteca seleccionada también puede ser útil. Su disposición en jQuery, Prototype y MooTools versiones.

    Adjunto una captura de pantalla de cómo la selección múltiple funcionalidad se ve en el Elegido.

    jQuery multiselect menú desplegable

    • Licencia libre y de buenas características, me gusta.
    • Mala documentación: toda suerte de descubrir cómo anular la selección de valores?
    • Te refieres a través de programación, o de la interfaz de usuario? Con la interfaz de usuario, usted sólo necesita hacer clic en el icono de la cruz para el multi-selecciona.
    • Muy buen plugin, me gusta demasiado 🙂
    • en el page_load, ¿cómo puedo solicitar una matriz para seleccionar elementos en el elegido?
  2. 16

    Yo también estaba buscando una simple selección múltiple para mi empresa. Quería algo sencillo, altamente personalizable y sin grandes dependencias de otros de jQuery.

    No me pareció un ajuste a mis necesidades, así que decidí código de mi propia.

    Yo lo uso en la producción.

    He aquí algunas de las demos y documentación: loudev.com

    Si quieres contribuir, compruebe el repositorio de github

    • Usted ha hecho un frío multi seleccione la lista, gracias 🙂
    • Agradable, este es un enfoque diferente que realmente me gusta. No estoy seguro de si la vamos a usar, pero me puse a pensar acerca de lo que quiero que la interfaz de usuario para ver realmente como. Gracias!
    • Estoy teniendo una experiencia extraña con su multiselect plugin.. he explicado en mi pregunta aquí --> stackoverflow.com/questions/16725015/… .. puede usted por favor a ver si hay algo malo en lo que hizo.
  3. 9
    • Descarga de jquery.multiselect

    • Incluyen la jquery.multiselect.js y jquery.multiselect.los archivos css

      <script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script>
      <link href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />

    • Llenar el select input

    • Agregar 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
      });

    • Usted puede cambiar el estilo de

      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 quieres volver a llenar el select, debe actualizarlo:

      $('#' + 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");

    • estoy utilizando el mismo js y css, pero soy incapaz de controlarse los valores que me guía a donde estoy haciendo error?var SelectedOptions = $(‘#ddlColumn’).multiselect(«getChecked»).mapa(function () { return esto.valor; }).get(); alert(SelectedOptions);
    • Puede usted por favor seleccione la documentación y las opciones disponibles para este?
  4. 3

    Echa un vistazo a erichynds desplegable de selección múltiple con gran cantidad de opciones de configuración y ajustes.

    • Me gustaría que si el filtro se me permite seleccionar la parte superior filtrada elemento con la tecla enter, tal vez se puede, pero la demo no lo muestran. Esto se ve muy interesante, y no me la quieren usar, pero de momento me gusta que el jQuery MuiltiSelect la sencillez por lo que es el ganador hasta que seleccione por entrar es el comportamiento predeterminado para ese widget.
    • También cuando el filtro está activo, si las flechas arriba/abajo podría entrar en la lista opción que sería bueno también.
  5. 3

    Puede utilizar elegido.me descargue todo el archivo desde este enlace
    Elegido Enlace de descarga

    <!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 todos los

    • Por favor, en el page_load, ¿cómo puedo solicitar una matriz para seleccionar elementos en el elegido?
    • No entiendo lo que quieres u .si es posible hacer una pregunta en stackoverflow y compartir ur pregunta enlaces
  6. 1
    <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);
  7. 1

    Que podrían hackear su cuenta, no depender de plugins de jQuery… a pesar de que había necesidad de seguir la pista externa (en JS) de los elementos seleccionados, ya que la transición iba a quitar el estado seleccionado info:

    <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>
  8. 0

    Usted está buscando para hacer algo como esto http://jsfiddle.net/robert/xhHkG/

    $('#transactionType').attr({
        'multiple': true,
        'size' : 10
    });

    Puesto que en un $(function() {...}) o algún otro onload

    Editar

    A leer tu pregunta, usted no está realmente en busca de un select múltiple… pero un cuadro de lista desplegable que le permite seleccionar múltiples. Sí, probablemente lo mejor es usar un plugin para que el o escribir desde la base, no es una «respuesta rápida» tipo de acuerdo, aunque.

Dejar respuesta

Please enter your comment!
Please enter your name here