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.
This question is related to
jquery
jquery-ui
jquery-plugins
multi-select
The answer is
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");
<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);
You can use chosen.i download all file from this link Chosen 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>
All file on all same folder
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'
});
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
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.
Take a look at erichynds dropdown multiselect with huge amount of settings and tunings.
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.
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:
<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>
Source: Stackoverflow.com