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:
VIDEO
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) {
