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