Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown

Welcome folks today in this blog post we will be using the select2.js library to display the single and multi-select dropdown in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Select2.js Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Select2.js Example</title>

</head>

<body>

</body>

</html>

First of all you need to include the jquery and the select2 library cdn for the css and js and now we need to write the html as shown below

Single Select Dropdown

Now we will be displaying the single select dropdown as shown below

 <label for="my-select">Select an Option:</label>
    <select style="width:100%" id="my-select" class="js-example-basic-single" name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
    </select>

<label for="my-select">Select an Option:</label>

<option value="AL">Alabama</option>

<option value="AK">Alaska</option>

<option value="AZ">Arizona</option>

<option value="AR">Arkansas</option>

<option value="CA">California</option>

<option value="CO">Colorado</option>

<option value="CT">Connecticut</option>

<option value="DE">Delaware</option>

<option value="DC">District Of Columbia</option>

</select>

 $(document).ready(function () {
            $('.js-example-basic-single').select2({
                placeholder: "Select a State",
                allowClear: true
            });

})

$(document).ready(function () {

$('.js-example-basic-single').select2({

placeholder: "Select a State",

allowClear: true

});

})

As you can see we are using the select2() method and inside it we are passing the placeholder text

Multi-Select Dropdown

Now we will be showing the dropdown input field where user can select multiple values as shown below

 <label for="select-multiple">Select Teams</label>
    <select style="width:100%" id="select-multiple" class="js-example-basic-multiple" name="teams[]" multiple="multiple">
        <option value="aus">Australia</option>
        <option value="ind">India</option>
        <option value="nz">New Zealand</option>
        <option value="sl">Sri Lanka</option>
        <option value="sa">South Africa</option>
        <option value="ned">Netherlands</option>
        <option value="eng">England</option>
    </select>

<label for="select-multiple">Select Teams</label>

<option value="aus">Australia</option>

<option value="ind">India</option>

<option value="nz">New Zealand</option>

<option value="sl">Sri Lanka</option>

<option value="sa">South Africa</option>

<option value="ned">Netherlands</option>

<option value="eng">England</option>

</select>

As you can see for receiving multiple inputs we have added the multiple attribute as shown above. Now we need to add the javascript code as shown below

$('.js-example-basic-multiple').select2({
    placeholder: "Select a team",
    allowClear: true
});

$('.js-example-basic-multiple').select2({

placeholder: "Select a team",

allowClear: true

});

Remote Data Fetching in Select Dropdown

Now we will be fetching remote data from API and display it inside the select dropdown as shown below

  <label for="my-select">Select a City:</label>
    <select style="width:100%" id="my-select" class="js-example-data-ajax" name="city"></select>

1 2	<label for="my-select">Select a City:</label> <select style="width:100%" id="my-select" class="js-example-data-ajax" name="city"></select>

$('.js-example-data-ajax').select2({
                ajax: {
                    url: 'https://api.teleport.org/api/cities/?search=',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results: $.map(data._embedded["city:search-results"], function (item) {
                                return {
                                    text: item.matching_full_name,
                                    id: item._links["city:item"].href
                                }
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'Search for a city',
                minimumInputLength: 3
            });

$('.js-example-data-ajax').select2({

ajax: {

url: 'https://api.teleport.org/api/cities/?search=',

dataType: 'json',

delay: 250,

processResults: function (data) {

return {

results: $.map(data._embedded["city:search-results"], function (item) {

return {

text: item.matching_full_name,

id: item._links["city:item"].href

}

})

};

cache: true

placeholder: 'Search for a city',

minimumInputLength: 3

});

As you can see we are making the ajax request to the api and the data is returned in the form of json and we are displaying the data inside the select2 dropdown as shown below