This time I will share jQuery Plugin and tutorial about jQuery Plugin For Selecting Multiple Elements – Multiple Select, hope it will help you in programming stack.
| File Size: | 350 KB |
|---|---|
| Views Total: | 71872 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Multiple Select is a useful jQuery plugin that allows you to select multiple elements by clicking the checkboxes in a select drop down list.
More features:
- Live filtering.
- Supports the native select element.
- Supports both single and multiple selection.
- Supports both static and dynamic data.
- Multiple languages.
- Bootstrap 3/4 themes.
- Useful options, methods, and events.
How to use it:
1. Include jQuery library and jQuery Multiple Select on your web page
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery.multiple.select.js"></script> |
2. Include jQuery Multiple Select CSS to style the select box
1 |
<link href="multiple-select.css" rel="stylesheet" type="text/css"> |
3. Create a stardard html select box.
1 |
<select id="demo"> |
2 |
<option value="1">1</option> |
3 |
<option value="2">2</option> |
4 |
<option value="3">3</option> |
5 |
... |
6 |
</select> |
4. Call the plugin on the select element and done.
1 |
$(function() { |
2 |
$("#demo").multipleSelect({ |
3 |
// options here |
4 |
}); |
5 |
}); |
5. You’re also allowed to define the options in the JavaScript:
01 |
$(function() { |
02 |
$("#demo").multipleSelect({ |
03 |
data: [ |
04 |
{ |
05 |
text: 'January', |
06 |
value: 1 |
07 |
}, |
08 |
{ |
09 |
text: 'February', |
10 |
value: 2 |
11 |
}, |
12 |
{ |
13 |
text: 'March', |
14 |
value: 3 |
15 |
} |
16 |
] |
17 |
}) |
18 |
}); |
19 |
20 |
$(function() { |
21 |
$("#demo").multipleSelect({ |
22 |
data: [ |
23 |
{ |
24 |
type: 'optgroup', |
25 |
label: 'Group 1', |
26 |
children: [ |
27 |
{ |
28 |
text: 'January', |
29 |
value: 1 |
30 |
}, |
31 |
{ |
32 |
text: 'February', |
33 |
value: 2 |
34 |
}, |
35 |
{ |
36 |
text: 'March', |
37 |
value: 3 |
38 |
} |
39 |
] |
40 |
}, |
41 |
{ |
42 |
type: 'optgroup', |
43 |
label: 'Group 2', |
44 |
children: [ |
45 |
{ |
46 |
text: 'July', |
47 |
value: 7 |
48 |
}, |
49 |
{ |
50 |
text: 'August', |
51 |
value: 8 |
52 |
}, |
53 |
{ |
54 |
text: 'September', |
55 |
value: 9 |
56 |
} |
57 |
] |
58 |
} |
59 |
] |
60 |
}) |
61 |
}); |
6. All possible options to customize the plugin.
001 |
$("#demo").multipleSelect({ |
002 |
003 |
// placeholder text |
004 |
placeholder: '', |
005 |
006 |
// an array of data |
007 |
data: [], |
008 |
009 |
// e.g. 'en-us' |
010 |
locale: undefined, |
011 |
012 |
// displays the Select All checkbox |
013 |
selectAll: true, |
014 |
015 |
// allows to select a single option |
016 |
single: false, |
017 |
018 |
// shows a radio button when single is set to true |
019 |
singleRadio: false, |
020 |
021 |
// allows multiple selection |
022 |
multiple: false, |
023 |
024 |
// hides checkboxes for Optgroup |
025 |
hideOptgroupCheckboxes: false, |
026 |
027 |
// width of the item |
028 |
multipleWidth: 80, |
