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
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
1 2 3 4 5 6 7 |
$(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
1 2 3 4 5 6 7 8 9 10 |
<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> |
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
1 2 3 4 |
$('.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
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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$('.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