Press "Enter" to skip to content

Multiple Select Dropdowns With Filter jQuery Plugin

Filter jQuery multi-selection plugin that turns a regular checkbox into an easy-to-use, filterable multiple-selection drop-down list where users can select one or more options by selecting checkboxes.

Improved usability of <select> elements in HTML:

  • The options are displayed in a drop-down menu.
  • Selected options are marked with a check box in the menu and a badge at the top.
  • Easily define all or none.
  • Type to filter long lists of options.
  • Use the up / down arrow keys to focus option and spacebar / enter to select.
  • Tab cycle to open/close the dropdown menu.

How to make use of it:

1. Load jQuery library (required) and Bootstrap’s stylesheet within the doc.

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

2. Load the filter-multi-select plugin’s JavaScript and Stylesheet within the doc.

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

3. Create a primary filterable multi-select dropdown by merely attaching the function filterMultiSelect to the present choose field with the multiple attribute:

<select multiple name="language" id="languages">
  <option value="js">JavaScript</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  ... more options here ...
</select>

4. You may also add choices to the multi-select dropdown through JavaScript.

const languages = $('#languages').filterMultiSelect({
      items: [
        ["Ruby","r"],
        ["C++","c",false,true]
      ],
});

5. Available choices to customize the multi-select dropdown.

const languages = $('#languages').filterMultiSelect({

      // displayed when no options are selected
      placeholderText: "nothing selected"

      // placeholder for search field
      filterText: "Filter"

      // Select All text
      selectAllText: "Select All",

      // determine if is case sensitive
      caseSensitive: false,

      // allows the user to disable and enable options programmatically
      allowEnablingAndDisabling: true
      
});

6. API strategies.

// check is has an option
languages.hasOption(value);

// select/deselect an option
languages.selectOption(value:string);
languages.deselectOption(value:string);

// check if an option is selected
languages.isOptionSelected(value:string);

// select/deselect all non-disabled options
languages.selectAll();
languages.deselectAll();

// enable/disable an option
languages.enableOption(value:string);
languages.disableOption(value:string);

// check if an option is disabled
languages.isOptionDisabled(value:string);

// enable/disable the multiselect dropdown
languages.enable();
languages.disable();

// returns a JSON string of the selected options' values
languages.getSelectedOptionsAsJson(includeDisabled=true);

Multiple Select With Filter And Checkboxes, filter multi select Plugin/Github


See Demo And Download

Official Website(andreww1011): Click Here

This superior jQuery/javascript plugin is developed by andreww1011. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *