This time I will share jQuery Plugin and tutorial about Select Multiple Options From A Popup – jQuery popupMultiSelect, hope it will help you in programming stack.
popup MultiSelect is a jQuery/Bootstrap plugin that converts the regular select element into a user-friendly multi select & tags input component.
The plugin enables the user to select multiple options from a popup instead of the dropdown list. Requires the Bootstrap’s modal component.
See It In Action:
How to use it:
1. Include the required jQuery library and Bootstrap 4 framework on the 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. Download and include the popupMultiSelect plugin on the page.
1
<
link
rel
=
"stylesheet"
href
=
"./dist/stylesheets/popup-multiselect.min.css"
/>
2
<
script
src
=
"./dist/javascripts/popup-multiselect.min.js"
></
script
>
3. Attach the function multiselect
to the multiple select and done.
1
<
select
multiple
name
=
"vehicle[autos]"
id
=
"example"
>
2
<
option
value
=
"volvo"
>Volvo</
option
>
3
<
option
value
=
"saab"
>Saab</
option
>
4
<
option
value
=
"opel"
>Opel</
option
>
5
<
option
value
=
"audi"
>Audi</
option
>
2
$(
"#example"
).multiselect();
4. Set the maximum number of options allowed to select.
2
$(
"#example"
).multiselect({
5. Enable/disable the animation. Default: true.
2
$(
"#example"
).multiselect({
6. Set the modal size. Default: ‘sm’.
2
$(
"#example"
).multiselect({
7. Customize the placeholder text.
2
$(
"#example"
).multiselect({
3
title:
"Select Options"
8. Customize the rendering templates.
02
$(
"#example"
).multiselect({
04
'<div class="selectWrap clearfix"><span class="select-content"></span><a href="#" class="open-options clickable"><span class="icon icon-list">☰</span></a></div>'
,
06
'<span class="addedOption" ><span class="text"></span><span class="clickable removeOption"><span class="icon icon-remove" aria-hidden="true">☓</span></span></span>'
,
08
'<div class="select modal in" aria-hidden="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><div><h5 class="modal-title"></h5><div class="help-block"></div></div><span class="float-right clickable close" aria-hidden="true">☓</span></div><div class="modal-body"></div></div></div></div>'
,
10
'<div class="option clickable"><span class="option-text"></span><span class="option-tick"><span class="icon icon-ok" aria-hidden="true">✓</span></span></div>'
,
9. API methods.
02
$(
"#example"
).multiselect(
"enable"
);
03
$(
"#example"
).multiselect(
"disable"
);
06
$(
"#example"
).multiselect(
"show"
);
07
$(
"#example"
).multiselect(
"hide"
);
10
$(
"#example"
).multiselect(
"selectOption"
, value);
13
$(
"#example"
).multiselect(
"deselectOption"
, value);
16
$(
"#example"
).multiselect(
"addOption"
,{
10. Event handlers.
01
$(
"#example"
).on(
"enabled.bs.multiselect"
,
function
(event) {
05
$(
"#example"
).on(
"disabled.bs.multiselect"
,
function
(event) {
09
$(
"#example"
).on(
"show.bs.multiselect"
,
function
(event) {
13
$(
"#example"
).on(
"shown.bs.multiselect"
,
function
(event) {
17
$(
"#example"
).on(
"hide.bs.multiselect"
,
function
(event) {
21
$(
"#example"
).on(
"hidden.bs.multiselect"
,
function
(event) {
25
$(
"#example"
).on(
"selected.bs.multiselect"
,
function
(event, option) {