Select2

  1. Forms
  2. 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>
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>
© Velzon.
Design & Develop by Themesbrand