Associated Multiselect Boxes With jQuery - multiselect.js

A user-friendly jQuery multiselect plugin that allows the user to select multiple options from associated multiselect boxes.

The plugin also allows you to specify an array of options which will automatically be disabled depending on the options you selected in another multiselect box. 

A typical use of this plugin is to create a multiselect component for product variations on your e-commerce website.

How to use it:

1. The plugin requires jQuery library and Bootstrap 4 framework to work.

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

2. The plugin requires jQuery library and Bootstrap 4 framework to work.

<script src="./multiselect.js"></script>

3. Create a group of multiselect boxes using Bootstrap's dropdown component. Required data attributes:

• data-mt-col: column index
• data-mt-name: option name

<div class="btn-group mt-3 ml-5">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle mt-header-column-0"
      type="button"
      aria-haspopup="true"
      aria-expanded="false"
      data-flip="false">
      Color
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item mt-select" data-mt-col="0" data-mt-name="White" href="#">White</a>
      <a class="dropdown-item mt-select" data-mt-col="0" data-mt-name="Black" href="#">Black</a>
      <a class="dropdown-item mt-select" data-mt-col="0" data-mt-name="Red" href="#">Red</a>
      <a class="dropdown-item mt-select" data-mt-col="0" data-mt-name="Green" href="#">Green</a>
      <a class="dropdown-item mt-select" data-mt-col="0" data-mt-name="Blue" href="#">Blue</a>
      <a class="dropdown-item mt-select" data-mt-col="0" data-mt-name="Yellow" href="#">Yellow</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle mt-header-column-1"
      type="button"
      aria-haspopup="true"
      aria-expanded="false"
      data-flip="false">
      Size
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item mt-select" data-mt-col="1" data-mt-name="Small" href="#">Small</a>
      <a class="dropdown-item mt-select" data-mt-col="1" data-mt-name="Medium" href="#">Medium</a>
      <a class="dropdown-item mt-select" data-mt-col="1" data-mt-name="Large" href="#">Large</a>
      <a class="dropdown-item mt-select" data-mt-col="1" data-mt-name="X-Large" href="#">X-Large</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle mt-header-column-2"
      type="button"
      aria-haspopup="true"
      aria-expanded="false"
      data-flip="false">
      Text color
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item mt-select" data-mt-col="2" data-mt-name="Black Text" href="#">Black</a>
      <a class="dropdown-item mt-select" data-mt-col="2" data-mt-name="White Text" href="#">White</a>
    </div>
  </div>
</div>

4. Determine a 'Forbidden' list as follows:

var forbidden = [
    [ "White", "White Text" ],
    [ "Black", "Black Text" ]
];

5. Initialize the plugin and pass the 'Forbidden' array as the second array to the multiselect method.

$(".mt-select").multiselect("init", forbidden);

6. Reset all the multiselect boxes.

$(".mt-select").multiselect("reset", forbidden);

---

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