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
<!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/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/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
<select class="select2-example" name="fruits[]" multiple="multiple">
...
<!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/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/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/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/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
