JQuery multiselect dropdown menu

Question

JQuery multiselect dropdown menu

I have a simple html multi select dropdown:

<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 using this list in case javascript is disabled, but with javaScript I would like to display the list as a drop-down list with multiple choices. That is, it shows only one item in the list until it clicks, and then it expands to display x items and provide scrolling where I can select multiple items as you would expect by holding shift or ctrl.

The new jQuery was looking for http://jquery.com/ but has not yet found what I need.

Change users of Struts2, the selected answer will be encoded using [], this causes problems in struts2, however it is very simple. Just open jquery.multiSelect.js and find "[]" and delete one instance that is used in string concatenation. I also use jQuery 1.4.4, not 1.3.2, which comes with it, and everything works fine.

+45

jquery jquery-ui jquery-plugins multi-select

Quaternion Jan 20 '11 at 22:29

source share

10 answers

Update (2017): The following two libraries have become the most common drop-down libraries used in Javascript. Although they are jQuery-native, they have been set up to work with everything from AngularJS 1.x to creating custom CSS for Bootstrap. (Selected by JS, the original answer here apparently fell to 3 in popularity.)

Select2: https://select2.imtqy.com/
Highlight: http://selectize.imtqy.com/selectize.js/

Mandatory screenshots below.

Choice2:

Selectize:

Original answer (2012) . I think the Chosen library might also be useful. Its available in jQuery, Prototype, and MooTools versions.

Attached is a screenshot of how the function for selecting multiple favorites looks like.

Chosen library

+67

Suman Feb 28 '12 at 22:37

source share

I was also looking for a simple multi-choice for my company. I wanted something simple, customizable and without big dependencies other than jQuery.

I did not find the needs suitable for me, so I decided to write my own. I use it in production.

Here are some demos and documentation: loudev.com

If you want to contribute, check out the github repository

+12

lou Aug 17 '11 at 12:52

source share

Download jquery.multiselect
Include 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" />
Fill in your chosen entry
Add multi-selection
$('#' + 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 can 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 refill the selection, you must update it:
$('#' + Field).multiselect('refresh');
To get selected values (separated by commas):
var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();
To clear all selected values:
$('#' + Field).multiselect("uncheckAll");

+9

Oranit Dar Sep 04 '14 at 13:06 on

source share

Take a look at dropdown multiselect eyishinds with lots of settings and options.

+3

sergejsvit Oct 21 '11 at 8:26

source share

You can use selected.i to download the entire file from this link. Selected download link

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

Entire file in all folders

+3

syed mhamudul hasan akash Apr 04 '16 at 8:30

source share

You can hack your own without relying on jQuery plugins ... although you will need to keep track of the external (in JS) selected elements as the transition will delete the selected status information:

 <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>

+1

nmz787 Apr 7 '14 at 19:10

source share

You want to do something like this http://jsfiddle.net/robert/xhHkG/

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

Put this in $(function() {...}) or some other onload

Edit

Reread your question, you're really not looking for multiple choice ... but a drop-down list that allows you to select multiple. Yes, it might be best to use a plugin for this or write it from scratch, this is not a deal with a quick response.

0

Robert Jan 20 '11 at 10:45

source share

 <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);

0

wasay raza Mar 07 '14 at 13:12

source share

I used jQuery MultiSelect to implement a drop-down menu with multiple values using a checkbox. You can see the implementation guide from here - Multi - select dropdown with checkbox

The implementation is very simple, only the following code needs to be used.

 $('#transactionType').multiselect({ columns: 1, placeholder: 'Select Transaction Type' });

0

JoyGuru May 24 '16 at 5:54

source share

Bill N · Accepted Answer · 2011-01-20 22:46

jQuery MultiSelect is the one that I have used successfully. You can see a demo to determine what you are looking for.

JQuery multiselect dropdown menu

Edit

More articles: