MultiSelect is a simple jQuery plugin that transforms normal multi select list into a multi-column dropdown list with checkboxes. This plugin is simply an alternative interface for the native select list element. When you check an option in the plugin the value is selected on the native list. This allows the value to be submitted in a form as well as retreived through normal POST/GET and javascript methods.
Libraries
Load the required libraries on page to run this plugin.
< link href= "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel= "stylesheet" />
< link href= "./jquery.multiselect.css" rel= "stylesheet" />
< script src= "https://code.jquery.com/jquery-1.12.4.js" > script>
< script src= "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > script>
< script src= "./jquery.multiselect.js" > script>
HTML
Below is the sample list box which need to transforms normal multi select list into a multi-column dropdown list with checkboxes.
="basic[]" multiple = "multiple" class= "3col active" >
value= "AL" > Alabama >
value= "AK" > Alaska >
value= "AZ" > Arizona >
value= "AR" > Arkansas >
value= "CA" > California >
value= "CO" > Colorado >
value= "CT" > Connecticut >
value= "DE" > Delaware >
value= "FL" > Florida >
value= "GA" > Georgia >
value= "HI" > Hawaii >
value= "ID" > Idaho >
value= "IL" > Illinois >
value= "IN" > Indiana >
value= "IA" > Iowa >
value= "KS" > Kansas >
value= "KY" > Kentucky >
value= "LA" > Louisiana >
value= "ME" > Maine >
value= "MD" > Maryland >
value= "MA" > Massachusetts >
value= "MI" > Michigan >
value= "MN" > Minnesota >
value= "MS" > Mississippi >
value= "MO" > Missouri >
value= "MT" > Montana >
value= "NE" > Nebraska >
value= "NV" > Nevada >
value= "NH" > New Hampshire >
value= "NJ" > New Jersey >
value= "NM" > New Mexico >
value= "NY" > New York >
value= "NC" > North Carolina >
value= "ND" > North Dakota >
value= "OH" > Ohio >
value= "OK" > Oklahoma >
value= "OR" > Oregon >
value= "PA" > Pennsylvania >
value= "RI" > Rhode Island >
value= "SC" > South Carolina >
value= "SD" > South Dakota >
value= "TN" > Tennessee >
value= "TX" > Texas >
value= "UT" > Utah >
value= "VT" > Vermont >
value= "VA" > Virginia >
value= "WA" > Washington >
value= "WV" > West Virginia >
value= "WI" > Wisconsin >
value= "WY" > Wyoming >
>
Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming
JS
Now call the plugin on page with some usable features like search and select/deselect all.
$( function ( ) {
$( 'select[multiple].active.3col' ) .multiselect ( {
columns: 3 ,
placeholder: 'Select States' ,
search: true ,
searchOptions: {
'default' : 'Search States'
} ,
selectAll: true
} ) ;
} ) ;
$(function () {
$(‘select[multiple].active.3col’).multiselect({
columns: 3,
placeholder: ‘Select States’,
search: true,
searchOptions: {
‘default’: ‘Search States’
},
selectAll: true
});
});
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
Related