Select2 Dropdown


08th August 2020 3 mins read
Share On        


Convert you simple dropdown to super cool dropdown with Select2 jQuery library. Select2 comes with preloaded features like search, clear all, multiple selects, tagging, and many more event handlers.


After integrating Select2 you dropdown's will look like the following


Select2 Dropdown Integration | StackCoder


NOTE: Code available in GitHub @ Select2 Dropdown Integration

Downloading Select2


Basically you need the following CSS & JS files to work with Select2


Select2 CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" crossorigin="anonymous" />


Select2 Bootstrap4 CSS

<link rel="stylesheet" href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" crossorigin="anonymous" />


jQuery File

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>


Select2 Javascript File

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" crossorigin="anonymous"></script>

Integration InHTML File


Basically our HTML file looks like the following


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select2 Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" crossorigin="anonymous" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }


        .select2-demo {
            width: 400px;
            margin: 50px auto;
        }
        select {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="select2-demo">
        <h2>Default Drop Down</h2>
        <select name="" id="default">
            <option>Apple</option>
            <option>Mango</options>
            <option>Sapota</options>
            <option>Banana</options>
            <option>Grapes</options>
        </select>
        <br><br><br><br>
        <h2>Select2 Drop Down</h2>
        <select name="" id="select2">
            <option>Apple</option>
            <option>Mango</options>
            <option>Sapota</options>
            <option>Banana</options>
            <option>Grapes</options>
        </select>
        <br><br><br><br><br><br><br><br>
        <h2>Default Multi Drop Down</h2>
        <select name="" multiple id="default">
            <option>Apple</option>
            <option>Mango</options>
            <option>Sapota</options>
            <option>Banana</options>
            <option>Grapes</options>
        </select>
        <br><br><br><br>
        <h2>Select2 Multiple Drop Down</h2>
        <select name="" multiple id="select2-multi">
            <option>Apple</option>
            <option>Mango</options>
            <option>Sapota</options>
            <option>Banana</options>
            <option>Grapes</options>
        </select>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" crossorigin="anonymous"></script>


    <script>
        $('#select2, #select2-multi').select2();
    </script>
</body>
</html>

Activating The DropDown With Select2 JS


Yup, the following is the only code that you need to activate the select dropdown


Select2 With Default Theme

<script>
    $('#select2, #select2-multi').select2();
</script>


Select2 With Bootstrap4 Theme

<script>
    $('#select2, #select2-multi').select2({
        theme: 'bootstrap4'
    });
</script>

More Select2 DropDowns Options


You can pass select2 options as an object to select2 function like the following


<script>
    $('#select2, #select2-multi').select2({
        theme: 'bootstrap4',
        allowClear: true,
        closeOnSelect: true, 
    });
</script>


There are many more options you can check in their official website SELECT2


Conclusion


Hope the article helped you.




AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing