This time I will share jQuery Plugin and tutorial about Flexible Bootstrap 4 Dropdown Plugin With jQuery – Bootstrap 4 Select, hope it will help you in programming stack.
| File Size: | 307 KB |
|---|---|
| Views Total: | 21775 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is a jQuery extension for the Silviomoreto’s Bootstrap Select plugin that enhances the default Bootstrap 4 dropdown components with live search, multiple selection, custom styling, select/deselect all support.
How to use it:
1. Include the necessary Bootstrap 4 framework and other required resources on the web page.
1 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
3 |
<script src="/path/to/cdn/bootstrap.min.js"></script> |
2. Include the JavaScript bootstrap-select.js and style sheet bootstrap-select.css on the page.
1 |
<link rel="stylesheet" href="bootstrap-select.css"> |
2 |
<script src="bootstrap-select.js"></script> |
3. Call the plugin with default options on the existing select element and done.
1 |
var mySelect = $('select').selectpicker();; |
4. The plugin comes with lots of configuration options to customize the Bootstrap 4 dropdown components. Override the values as displayed below and pass them as an object to the selectpicker function.
001 |
var mySelect = $('select').selectpicker({ |
002 |
003 |
// text for no selection |
004 |
noneSelectedText: 'Nothing selected', |
005 |
006 |
// text for no result |
007 |
noneResultsText: 'No results matched {0}', |
008 |
009 |
// Sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection. |
010 |
// When set to a function, the first parameter is the number of selected options, and the second is the total number of options. |
011 |
// The function must return a string. |
012 |
countSelectedText: function (numSelected, numTotal) { |
013 |
return (numSelected == 1) ? "{0} item selected" : "{0} items selected"; |
014 |
}, |
015 |
016 |
// The text that is displayed when maxOptions is enabled and the maximum number of options for the given scenario have been selected. |
017 |
// If a function is used, it must return an array. array[0] is the text used when maxOptions is applied to the entire select element. array[1] is the text used when maxOptions is used on an optgroup. |
018 |
// If a string is used, the same text is used for both the element and the optgroup. |
019 |
maxOptionsText: function (numAll, numGroup) { |
020 |
return [ |
021 |
(numAll == 1) ? 'Limit reached ({n} item max)' : 'Limit reached ({n} items max)', |
022 |
(numGroup == 1) ? 'Group limit reached ({n} item max)' : 'Group limit reached ({n} items max)' |
023 |
]; |
024 |
}, |
025 |
026 |
// Text for Select All button |
027 |
selectAllText: 'Select All', |
028 |
029 |
// Text for Deselect All button |
030 |
deselectAllText: 'Deselect All', |
031 |
032 |
// Shows done button |
033 |
doneButton: false, |
034 |
035 |
// Text for done button |
036 |
doneButtonText: 'Close', |
037 |
038 |
// custom separator |
039 |
multipleSeparator: ', ', |
040 |
041 |
// button styles |
042 |
styleBase: 'btn', |
043 |
style: 'btn-default', |
044 |
045 |
// dropdown size |
046 |
size: 'auto', |
047 |
048 |
// dropdown title |
049 |
title: null, |
050 |
051 |
// 'values' | 'static' | 'count' | 'count > x' |
052 |
selectedTextFormat: 'values', |
053 |
054 |
// dropdown width |
055 |
width: false, |
056 |
057 |
// e.g., container: 'body' | '.main-body' |
058 |
container: false, |
059 |
060 |
// hide disabled options |
061 |
hideDisabled: false, |
062 |
063 |
// shows sub text |
064 |
showSubtext: false, |
065 |
066 |
// shows icon |
067 |
showIcon: true, |
068 |
069 |
// shows content |
070 |
showContent: true, |
071 |
072 |
// auto dropup |
073 |
dropupAuto: true, |
074 |
075 |
// shows dropdown header |
076 |
header: false, |
077 |
078 |
// live search options |
079 |
liveSearch: false, |
080 |
liveSearchPlaceholder: null, |
081 |
liveSearchNormalize: false, |
082 |
liveSearchStyle: 'contains', |
083 |
084 |
// enables Select All / Deselect All box |
085 |
actionsBox: false, |
086 |
087 |
// icons |
088 |
iconBase: 'glyphicon', |
089 |
tickIcon: 'glyphicon-ok', |
090 |
091 |
// shows checkmark on selected option |
092 |
showTick: false, |
093 |
094 |
// custom template |
095 |
template: { |
096 |
caret: '<span class="caret"></span>' |
097 |
}, |
098 |
099 |
// string | array | function |
100 |
maxOptions: false, |
101 |
102 |
// enables the device's native menu for selec
|
