jQuery Plugin For Filterable Multiple Select with Checkboxes - fSelect

jQuery Plugin For Filterable Multiple Select with Checkboxes - fSelect
File Size: 6.83 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

fSelect is a simple jQuery plugin that turns a regular select box into a filterable multiple select dropdown with checkboxes for easier options selection.

How to use it:

1. Include the jQuery fSelect's CSS file for default styles.

<link href="fSelect.css" rel="stylesheet">

2. Create a normal multiple select.

<select class="demo" multiple="multiple">
  <optgroup label="Languages">
      <option value="cp">C++</option>
      <option value="cs">C#</option>
      <option value="oc">Object C</option>
      <option value="c">C</option>
  <optgroup label="Scripts">
      <option value="js">JavaScript</option>
      <option value="php">PHP</option>
      <option value="asp">ASP</option>
      <option value="jsp">JSP</option>

3. Include jQuery JavaScript library and the jQuery fSelect's script at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="fSelect.js"></script>

4. Initialize the multiple select.


Change log:



  • Code tweak


  • Added "fs-open" class when opened


  • Better performance for large datasets


  • Various bugfixes


  • Fix: preserve spaces during search


  • Support for disabled options


  • fix for not working by direct clicking arrow


  • added keyboard support.

This awesome jQuery plugin is developed by mgibbs189. For more Advanced Usages, please check the demo page or visit the official website.