jQuery Select2 Demo Tutorial


jQuery Select2 Plug-in


To add jQuery files to your web page, follow below steps to copy and paste below HTML Line in between <head></head> tag

CSS Style File
<script src="https://select2.github.io/dist/css/select2.min.css"></script>

JS File
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

Single Select With Search Boxs


Step 1: Add jQuery script to your web page, copy and paste below jQuery script in between <script></script> tag

$(document).ready(function() {
    $(".js-example-basic-single").select2();
});

Step 2: Add class to your select tag, copy and paste below class name .js-example-basic-single

<select class="js-example-basic-single">
    <option value="AL">India</option>
    <option value="WY">Hyderbad</option>
</select>

Demo


Multiple Select Boxs


Step 1: Add jQuery script to your web page, copy and paste below jQuery script in between <script></script> tag

$(document).ready(function() {
    $(".js-example-basic-multiple").select2();
});

Step 2: Add class to your select tag, copy and paste below class name .js-example-basic-multiple

<select class="js-example-basic-multiple" multiple="multiple">
    <option value="India">India</option>
    <option value="Hyderabad">Hyderabad</option>
    <option value="Nagole">Nagole</option>
    <option value="Lalapet">Lalapet</option>
</select>

Demo

Post a Comment