Multi-Select Boxes – select2.js

Multi-Select Boxes gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. The primary features of Multi-Select Boxes Plugin:

  • In your language
  • Remote data support
  • Theming
  • Fully extensible
  • Dynamic item creation
  • Full browser support
  • Enhancing native selects with search.
  • Enhancing native selects with a better multi-select interface.
  • Loading data from JavaScript: easily load items via AJAX and have them searchable.
  • Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
  • Tagging: ability to add new items on the fly.
  • Working with large, remote datasets: ability to partially load a dataset based on the search term.
  • Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
  • Templating: support for custom rendering of results and selections.

Live Demo



How to Use

Add the css below to your html page

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />

Create a container where you want to render Multi-Select Boxes

<label for="id_label_multiple">
	Click this to highlight the multiple select element
	<select class="js-example-basic-multiple" name="states[]" multiple="multiple"
		style="margin-bottom:10px; width: 100%" id="id_label_multiple">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="AZ">Arizona</option>
		<option value="AR">Arkansas</option>
		<option value="CA">California</option>
		<option value="CO">Colorado</option>
		<option value="CT">Connecticut</option>
		<option value="DE">Delaware</option>
		<option value="DC">District Of Columbia</option>
		<option value="FL">Florida</option>
		<option value="GA">Georgia</option>
		<option value="HI">Hawaii</option>
		<option value="ID">Idaho</option>
		<option value="IL">Illinois</option>
		<option value="IN">Indiana</option>
		<option value="IA">Iowa</option>
		<option value="KS">Kansas</option>
	</select>
</label>
<br><br>

Load jQuery library together with the Multi-Select Boxes library into your code

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script>
	$(document).ready(function () {
		$('.js-example-basic-multiple').select2();
	});
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.