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, });
© 2021 DesignReset
Coded with
Alan Green
Lead Developer
Todo
Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark
New Task is added by Ernest Reeves
Dinner with Kelly Young has been moved to Completed Board by Dale Butler
Event Notifications
New Event has been added on 15 Dec 2020
Collect documents from Kelly at the restaurant tommorrow.
Meeting Event on 12 Nov has been updated to 8 PM
New Event Seminar organised by Design Reset will be held on 25 January
Today's Conference is Cancelled.
Meeting with Project Lead on 01 Jan has been updated to 15 Jan