Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
CSS
<!-- select 2 css -->
<script type='text/javascript' src='wwwroot/assetslibs/select2/dist/css/select2.min.css></script>
CSS
<!-- select 2 js -->
<script type='text/javascript' src='wwwroot/assetslibs/select2/dist/js/select2.min.js></script>
Initjs (Custom js)
<!-- app js -->
<script src="wwwroot/assetsjs/pages/form-advanced.init.js'%}"></script>
Add Package
yarn add select2 --save
Remove Package
yarn remove select2 or you can remove package by removing specific package from package.json
Examples:
Title |
HTML |
Single Select |
<select class="form-control select2">
<option>Select</option>
<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>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
</optgroup>
</select>
|
Multiple Select |
<select class="select2 form-control select2-multiple"
multiple="multiple" data-placeholder="Choose ...">
<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>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
</optgroup>
</select>
|
Search Disable |
<select class="form-control select2-search-disable">
<option>Select</option>
<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>
</optgroup>
</select>
|
Ajax (remote data) |
<select class="form-control select2-ajax"></select>
|
Templating |
<select class="form-control select2-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>
|