Mobile-friendly Multi Select Plugin For Bootstrap - Tile Multiselect

Tile Multiselect is a jQuery plugin for Bootstrap that transforms the normal select element into a mobile-friendly tiled multi-select user interface for easier option selection.

How to use it:

1. To use this plugin, you first need to install the jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script type="bootstrap.min.js"></script>

2. Insert the Tile Multiselect plugin's into your Bootstrap project.

<link rel="stylesheet" href="bootstrap-tile-multiselect.css">
<script src="bootstrap-tile-multiselect.js"></script>

3. Create a normal select element and config the multi-select user interface using the following 'data' attributes:

• data-limit: the maximum number of options
• data-description: add more description about the option

<select id="test-select" multiple data-limit="3">
  <option value="1" selected>One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4" data-description="More Description">Four</option>
</select>

4. Call the function tileMultiselect on the select element and done.

$('#test-select').tileMultiselect();

5. All default plugin options and callbacks.

$('#test-select').tileMultiselect({
  "columns": 3,
  "limit": false,
  "tileActiveClass": function() { return "btn-primary"; },
  "tileInactiveClass": function() { return "btn-default"; },
  "checkIcon": function() { return "glyphicon glyphicon-check"; },
  "uncheckIcon": function() { return "glyphicon glyphicon-unchecked"; },
  "description": null, // function
  "label": function(e, v, t) { return t; }
});

6. API methods.

// enable the plugin
$('#test-select').tileMultiselect('enable');

// disable the plugin
$('#test-select').tileMultiselect('disable');

// toggle the selection
$('#test-select').tileMultiselect('toggle', TRUE/FALSE);

// clear the selected options
$('#test-select').tileMultiselect('clearSelection');

// select a value
$('#test-select').tileMultiselect('selectValue', VALUE);

Change log:

2017-09-07

• Fixed: Javascript errors when option values have space

---

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