multi select filter checkbox - Free Download Multiple Select With Filter And Checkboxes Using jQuery

Free Download Multiple Select With Filter And Checkboxes Using jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Multiple Select With Filter And Checkboxes Using jQuery, hope it will help you in programming stack.

File Size: 158 KB
Views Total: 3066
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A jQuery plugin that converts a normal select box into a user-friendly filterable multi-select dropdown where your users are able to select one or more options by checking checkboxes.

Licensed under the LGPL-2.1 License.

More Features:

  • A ROOT checkbox that allows you to select all options with a single click.
  • Compatible with the latest Bootstrap 4.
  • Allows to append more options to the select dropdown via JavaScript.
  • Keyboard accessibility.
  • Especially suitable for tags input that enables the user to select tags from a predefined list.

How to use it:

1. Load jQuery library (required) and Bootstrap’s stylesheet (optional but recommended) in the document.

view source
1 <link rel="stylesheet" href="filter_multi_select.css" />
2 <script src="filter-multi-select-bundle.min.js"></script>

2. Load the filter-multi-select plugin’s JavaScript and Stylesheet in the document.

view source
1 <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
2 <script src="/path/to/cdn/jquery.slim.min.js"></script>

3. Create a basic filterable multielect dropdown by simply attaching the function filterMultiSelect to the existing select box with the multiple attribute:

view source
1 <select multiple name="language" id="languages">
2   <option value="js">JavaScript</option>
3   <option value="html">HTML</option>
4   <option value="css">CSS</option>
5   ... more options here ...
6 </select>
view source
1 const languages = $('#languages').filterMultiSelect();

4. You can also add options to the multielect dropdown via JavaScript.

  • label: Lable text
  • value: Option value
  • selected: Is selected?
  • disabled: Is disabled?
view source
1 const languages = $('#languages').filterMultiSelect({
2       items: [
3         ["Ruby","r"],
4         ["C++","c",false,true]
5       ],
6 });

5. Available options to customize the multielect dropdown.

view source
01 const languages = $('#languages').filterMultiSelect({
02  
03       // displayed when no options are selected
04       placeholderText: "nothing selected"
05  
06       // placeholder for search field
07       filterText: "Filter"
08  
09       // Select All text
10       selectAllText: "Select All",
11  
12       // determine if is case sensitive
13       caseSensitive: false,
14  
15       // allows the user to disable and enable options programmatically
16       allowEnablingAndDisabling: true
17        
18 });

6. API methods.

view source
01 // check is has an option
02 languages.hasOption(value);
03  
04 // select/deselect an option
05 languages.selectOption(value:string);
06 languages.deselectOption(value:string);
07  
08 // check if an option is selected
09 languages.isOptionSelected(value:string);
10  
11 // select/deselect all non-disabled options
12 languages.selectAll();
13 languages.deselectAll();
14  
15 // enable/disable an option
16 languages.enableOption(value:string);
17 languages.disableOption(value:string);
18  
19 // check if an option is disabled
20 languages.isOptionDisabled(value:string);
21  
22 // enable/disable the multiselect dropdown
23 languages.enable();
24 languages.disable();
25  
26 // returns a JSON string of the selected options' values
27 languages.getSelectedOptionsAsJson(includeDisabled=true);

Changelog:

v1.1.0 (2021-03-11)

  • Append the class filter-multi-select to select elements and have the plugin be applied automatically.
  • Or define your own selector in $.fn.filterMultiSelect.selector.
  • Access all element groups applied by the plugin in $.fn.filterMultiSelect.applied.

About Author:

Author: Andrew

Website: https://github.com/andreww1011/filter-multi-select

Related posts: