0
494
ViewsjQuery multiselect drop down menu
I have a simple html multi select drop down list:
<select id="transactionType" multiple="multiple" size="10">
<option value="ALLOC">ALLOC</option>
<option value="LOAD1">LOAD1</option>
<option value="LOAD2">LOAD2</option>
<!-- etcetera... -->
</select>
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.
3 answers
Answer question0
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.
0
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
0
Download jquery.multiselect
Include the jquery.multiselect.js and jquery.multiselect.css files
<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" />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");