jQuery multiselect drop down menu

Question

I have a simple html multi select drop down list    lt select id  transactionType  multiple  multiple  size  10  gt     lt option value  ALLOC  gt ALLOC lt  option gt     lt option value  LOAD1  gt LOAD1 lt  option gt     lt option value  LOAD2  gt LOAD2 lt  option gt     lt  -- etcetera    -- gt   lt  select gt    I want to continue to use this list in the event javascript is disabled however with javaScript I would like to render the list as a multi-select drop down list  That is it only shows one item in the list until clicked and then will expand to show x items and provide scrolling  where I can select multiple elements as you would expect while holding shift or ctrl   New to jQuery was searching the http   jquery com  but haven t yet found what I need   Edit Struts2 users  the selected answer will url encode with    this causes issues in struts2 the fix however is very easy  Simply open jquery multiSelect js and search for      and delete the one instance this is used in a string concatenation  I also am using jQuery 1 4 4 as opposed to the 1 3 2 which came bundled with it and everything works just fine

User · Answer

I was also looking for a simple multi select for my company. I wanted something simple, highly customizable and with no big dependencies others than jQuery.

I didn't found one fitting my needs so I decided to code my own.
I use it in production.

Here's some demos and documentation: loudev.com

If you want to contribute, check the github repository

User · Answer

You could hack your own  not relying on jQuery plugins    though you d need to keep track externally  in JS  of selected items since the transition would remove the selected state info    lt head gt     lt script type  text javascript  src  http   code jquery com jquery-1 4 4 min js  gt  lt  script gt     lt script type  text javascript  gt        window  load function              transactionType   focusin function                transactionType   attr  multiple   true                       transactionType   focusout function                transactionType   attr  multiple   false                     gt       lt  script gt   lt  head gt   lt body gt     lt select id  transactionType  gt       lt option value  ALLOC  gt ALLOC lt  option gt       lt option value  LOAD1  gt LOAD1 lt  option gt       lt option value  LOAD2  gt LOAD2 lt  option gt     lt  select gt     lt  body gt

User · Answer

You can use chosen i download all file from this link Chosen download Link   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head runat  server  gt       lt title gt  lt  title gt       lt link href  style css  rel  stylesheet  type  text css    gt       lt link href  prism css  rel  stylesheet  type  text css    gt       lt link href  chosen css  rel  stylesheet  type  text css    gt       lt script src  jquery-2 1 4 min js  type  text javascript  gt  lt  script gt       lt script src  chosen jquery js  type  text javascript  gt  lt  script gt       lt script src  prism js  type  text javascript  gt  lt  script gt       lt script type  text javascript  gt            function                      chzn-select   chosen                 lt  script gt   lt  head gt   lt body gt       lt form id  form1  runat  server  gt       lt div gt    lt ion-view view-title  Profile  gt   lt ion-content class  padding  gt    lt div gt       lt label class  item item-input  gt           lt div class  input-label  gt Enter Your Option lt  div gt               lt select class  chzn-select  multiple  true  name  faculty  style  width 1000px   gt                   lt option value  Option 2 1  gt Option 2 1 lt  option gt                   lt option value  Option 2 2  gt Option 2 2 lt  option gt                   lt option value  Option 2 3  gt Option 2 3 lt  option gt               lt  select gt          lt  label gt   lt  div gt   lt  ion-content gt   lt  ion-view gt        lt  div gt       lt  form gt   lt  body gt   lt  html gt    All file on all same folder

User · Answer

Download jquery multiselect Include the jquery multiselect js and jquery multiselect css files   lt script src  jquery-ui-multiselect-widget-master src jquery multiselect js  type  text javascript  gt  lt  script gt   lt link rel  stylesheet  href  jquery-ui-multiselect-widget-master jquery multiselect css    gt  Populate your select input Add the 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     You may change the style  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    If you want to repopulate the select  you must refresh it           Field  multiselect  refresh    To get the selected values  comma separated    var SelectedOptions           Field  multiselect  getChecked   map function              return this value         get    To clear all selected values           Field  multiselect  uncheckAll

User · Answer

lt select id  mycontrolId  multiple  multiple  gt      lt option value  1   gt one lt  option gt      lt option value  2   gt two lt  option gt      lt option value  3  gt three lt  option gt      lt option value  4  gt four lt  option gt   lt  select gt   var data    1 3 4   var dataarray   data split            mycontrolId   val dataarray

User · Answer

Take a look at erichynds dropdown multiselect with huge amount of settings and tunings

User · Answer

Update  2017   The following two libraries have now become the most common drop-down libraries used with Javascript  While they are jQuery-native  they have been customized to work with everything from AngularJS 1 x to having custom CSS for Bootstrap   Chosen JS  the original answer here  seems to have dropped to  3 in popularity     Select2  https   select2 github io  Selectize  http   selectize github io selectize js    Obligatory screenshots below   Select2    Selectize      Original answer  2012   I think that the Chosen library might also be useful  Its available in jQuery  Prototype and MooTools versions   Attached is a screenshot of how the multi-select functionality looks in Chosen

User · Answer

I ve used jQuery MultiSelect for implementing multiselect drop down menu with checkbox  You can see the implementation guide from here - Multi-select Dropdown List with Checkbox  Implementation is very simple  need only using the following code       transactionType   multiselect       columns  1      placeholder   Select Transaction Type

User · Answer

Are you looking to do something like this http   jsfiddle net robert xhHkG       transactionType   attr        multiple   true       size    10       Put that in a   function          or some other onload  Edit  Reread your question  you re not really looking for a multiple select    but a dropdown box that allows you to select multiple  Yeah  probably best to use a plugin for that or write it from the ground up  it s not a  quick answer  type deal though

[jquery] jQuery multiselect drop down menu

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-plugins

Examples related to multi-select