Select2

OverviewOfficial Website

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

Javascript

<!--jquery cdn-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--select2 cdn-->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Note

This is Select2 page in wihch we have used jQuery with cnd link!

Initjs (Custom js)

<script src="/assets/js/pages/select2.init.js"><
/script>

Add Package

npm i select2 --save

Remove Package

npm uninstall select2 For you can removing specific package from package.json

Examples

Title	HTML
Basic Select	`<select class="js-example-basic-single" name="state"> <option value="AL">Alabama</option> <option value="MA">Madrid</option> <option value="TO">Toronto</option> <option value="LO">Londan</option> <option value="WY">Wyoming</option> </select>`
Multi Select	<select class="js-example-basic-multiple" name="states[]" multiple="multiple"> <optgroup label="UK"> <option value="London">London</option> <option value="Manchester" selected>Manchester</option> <option value="Liverpool">Liverpool</option> </optgroup> <optgroup label="FR"> <option value="Paris">Paris</option> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> </optgroup> <optgroup label="SP"> <option value="Madrid" selected>Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Malaga">Malaga</option> </optgroup> <optgroup label="CA"> <option value="Montreal">Montreal</option> <option value="Toronto">Toronto</option> <option value="Vancouver">Vancouver</option> </optgroup> </select>
Ajax Select	`<select class="js-example-data-array" name="state"></select>`
Templating	`<select class="form-control js-example-templating"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> </select>`
Selections Templating	`<select class="form-control select-flag-templating"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> </select>`
Disabling a Select2 Control	<select class="js-example-disabled" name="state"> <option value="AL">Alabama</option> <option value="MA">Madrid</option> <option value="TO">Toronto</option> <option value="LO">Londan</option> <option value="WY">Wyoming</option> </select> <select class="js-example-disabled-multi" name="states[]" multiple="multiple"> <optgroup label="UK"> <option value="London">London</option> <option value="Manchester" selected>Manchester</option> <option value="Liverpool">Liverpool</option> </optgroup> <optgroup label="FR"> <option value="Paris">Paris</option> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> </optgroup> <optgroup label="SP"> <option value="Madrid" selected>Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Malaga">Malaga</option> </optgroup> <optgroup label="CA"> <option value="Montreal">Montreal</option> <option value="Toronto">Toronto</option> <option value="Vancouver">Vancouver</option> </optgroup> </select> </div> <div class="hstack gap-2 mt-3"> <button type="button" class="js-programmatic-enable btn btn-primary"> Enable </button> <button type="button" class="js-programmatic-disable btn btn-success"> Disable </button> </div>