Guide to use Select2 JS

Developers who want to provide the user with ease in filling out forms can use Select2 JS library. I’ll be walking you through building a useful type of forms using select2.js.

Guide to use Select2 JS

Select2 is a jQuery library. It's Mainly used for tag-formatted text fields, contact lists fields, country selectors, and more.it designed to be a replacement for the HTML <select> element.

It`s very lightweight and It also has a powerful API.

It`s also supported Remote data and RTL Languages.

Most modern browsers are Supported

 

Select2 examples

now I will show you simple use of Select2

First, we need to initialize Select2 by calling  .select2() on any jQuery selector

we prefer to put your code inside $(document).ready() to safely manipulated DOM.

$(document).ready(function() {
    $('select2-example').select2();
});

Select2 is Jquery library so you need to include the jquery js file 
look to your first Select2 example code

Select2

<!DOCTYPE html> 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Selectize.js Demo</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
 	</head>
    <body>
    <select class="select2-example" name="fruits" style="width:150px;">
        <option value="AL">apple</option>            
        <option value="WY">banana</option>
        <option value="WY">plums</option>
    </select>
    <script>
        $(document).ready(function() {
            $('.select2-example').select2();
        });
    </script>
	</body>
</html>

another Select2 js example with Multi-select boxes 

it's the same with the first example with small changes, you need to add 

multiple="multiple" before end of <select> element 
    <select class="select2-example" name="fruits[]" multiple="multiple">
...
​
 

Select2 Multi-select boxes 

<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Selectize.js Demo</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
 	</head>
    <body>
    <select class="select2-example" name="fruits[]" style="width:150px;" multiple="multiple">
        <option value="AL">apple</option>            
        <option value="WY">banana</option>
        <option value="WY">plums</option>
    </select>
    <script>
        $(document).ready(function() {
            $('.select2-example').select2();
        });
    </script>
	</body>
</html>

 

Select2 CDN

Copy the following CSS and JS code in the <head> section in your project

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

In the end, I hope you have found the select2 that suits you to improve  your HTML forms  or perhaps to increase your knowledge

Last modified