Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
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.
Articles For You
Install NGINX In Linux / Ubuntu And Managing
Unable to prepare route [{fallbackPlaceholder}] for serialization. Uses Closure In Laravel
Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool
Lazy Load Images In Chrome With This Simple Trick
Push Files To CPanel / Remote Server using FTP Software FileZilla
Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages
Factory States For Clean And Fluent Laravel Testing
Custom Validation Rules In PHP Laravel (Using Artisan Command)
Install Linux, NGINX, MYSQL, PHP (LEMP Stack) on Ubuntu
Redirect www to a non-www Website Or Vice Versa
Basic Server Security Setup For Ubuntu / Linux
Increase Session Timeout In Laravel
Manipulate HTML Using DOMDocument In PHP
What Is Composer? How Does It Work? Useful Composer Commands And Usage
