W3CoreUI

Select2.

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. Click here

Single select boxes

Select2 can take a regular select box like this


<select class="basic-select2">
	<option value="AL">Alabama</option>
	<option value="WY">Wyoming</option>
</select>

Multi-select boxes

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.


<select class="basic-select2" name="states[]" multiple="multiple">
	<option value="AL">Alabama</option>
	<option value="WY">Wyoming</option>
	<option value="UI">dlf</option>
</select>

Dropdown option groups

In HTML, <option> elements can be grouped by wrapping them with in an <optgroup> element.


<select class="basic-select2">
	<optgroup label="Group Name">
		<option>Nested option 1</option>
		<option>Nested option 2</option>
		<option>Nested option 3</option>
	</optgroup>
	<optgroup label="Another Group Name">
		<option>Nested option 1</option>
		<option>Nested option 2</option>
		<option>Nested option 3</option>
	</optgroup>
</select>

Disabling options

Select2 will correctly handle disabled options when disabled attribute is set) and from remote srouces where the object has disabled: true set.


<select class="basic-select2">
	<option value="one">First</option>
	<option value="two" disabled="disabled">Second (disabled)</option>
	<option value="three">Third</option>
</select>

Disabling a Select2 control

Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.


<div class="mb-3">
	<select class="select2-programmatic-enable">
		<option value="AL">Alabama</option>
		<option value="WY">Wyoming</option>
	</select>
</div>
<div class="mb-3">
	<select class="select2-programmatic-disable" name="states[]" multiple="multiple">
		<option value="AL">Alabama</option>
		<option value="WY">Wyoming</option>
	</select>
</div>
<button class="btn btn-primary me-2" id="select2-programmatic-enable">Enable</button>
<button class="btn btn-light" id="select2-programmatic-disable">Disable</button>

Select2 With Labels

You can, and should, use a <label> with Select2, just like any other <select> element.

Click this to highlight the single select element Click this to highlight the multiple select element


<label class="mb-4 select2-label" for="id_label_single">
	<span class="d-block mb-2">Click this to highlight the single select element</span>
	<select class="select2-with-label-single js-states d-block" id="id_label_single">
		<option value="AL">Alabama</option>
		<option value="WY">Wyoming</option>
	</select>
</label>
<label class="select2-label" for="id_label_multiple">
	<span class="d-block mb-2">Click this to highlight the multiple select element</span>
	<select class="select2-with-label-multiple js-states" id="id_label_multiple"
		multiple="multiple">
		<option value="AL">Alabama</option>
		<option value="WY">Wyoming</option>
	</select>
</label>

Dynamic option creation

In addition to a prepopulated menu of options, Select2 can dynamically create new options from text input by the user in the search box. This feature is called "tagging". To enable tagging, set the tagsoption to true:


<select id="dynamic-option-creation">
	<option value="AL">Red</option>
	<option value="WY">Green</option>
	<option value="BY">Yellow</option>
</select>

Loading array data

You may use the data configuration option to load dropdown options from a local array.


<select class="js-example-data-array">

</select>

Ajax (remote data)

Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API:


<select class="js-data-example-ajax">

</select>

RTL support

Select2 will work on RTL websites if the dir attribute is set on the <select> or any parents of it. You can also initialize Select2 with the dir: "rtl" configuration option.


<select class="rtl-select2">
	<option value="Alaska">Alaska</option>
	<option value="Hawaii">Hawaii</option>
	<option value="California">California</option>
</select>