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 optgroupsto 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 disabledattribute.
<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 placeholderoption.
<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:trueto 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:2with tags:trueto 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 © 2020 DesignReset,All Rights Reserved.
Coded with