Basic
Use select2()
function on select element to convert it to Select 2.
<select class="form-control basic">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
var ss = $(".basic").select2({
tags: true,
});
Small Select2
Use data('select2')
function to get container of select2.
<select class="form-control form-small">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
var formSmall = $(".form-small").select2({ tags: true });
formSmall.data('select2').$container.addClass('form-control-sm')
Nested
Add options inside the optgroups
to for group options.
<select class="form-control nested">
<optgroup label="Group1">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</optgroup>
<optgroup label="Group2">
<option>purple</option>
<option>orange</option>
<option>white</option>
</optgroup>
<optgroup label="Group3">
<option>white</option>
<option>purple</option>
<option>orange</option>
</optgroup>
</select>
$(".nested").select2({
tags: true
});
Disabling options
Disable Select using disabled
attribute.
<select class="form-control disabled-results">
<option value="one">First</option>
<option value="two" disabled="disabled">Second</option>
<option value="three">Third</option>
</select>
$(".disabled-results").select2();
Placeholder
Apply Placeholder by setting option placeholder
option.
<select class="placeholder js-states form-control">
<option>Choose...</option>
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
<option value="four">Fourth</option>
<option value="five">Fifth</option>
</select>
$(".placeholder").select2({
placeholder: "Make a Selection",
allowClear: true
});
Tagging with multi-value select boxes
Set tags: true
to convert select 2 in Tag mode.
<select class="form-control tagging" multiple="multiple">
<option>orange</option>
<option>white</option>
<option>purple</option>
</select>
$(".tagging").select2({
tags: true
});
Limiting the number of Tagging
Set maximumSelectionLength: 2
with tags: true
to limit selectin in Tag mode.
<select class="form-control tagging" multiple="multiple">
<option>orange</option>
<option>white</option>
<option>purple</option>
</select>
var ss = $(".basic").select2({
tags: true,
});
Copyright © 2021 DesignReset, All rights reserved.
Coded with