![Theme Switcher Image](https://stackcoder.in/images/theme-switcher.png?cb=stackcoder90070)
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.
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
NOTE: Code available in GitHub @ Select2 Dropdown Integration
Basically you need the following CSS & JS files to work with Select2
<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" />
<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>
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>
Yup, the following is the only code that you need to activate the select dropdown
<script>
$('#select2, #select2-multi').select2();
</script>
<script>
$('#select2, #select2-multi').select2({
theme: 'bootstrap4'
});
</script>
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
Hope the article helped you.
Send SMS With Amazon SNS (Simple Notification Service) Using PHP
Free SSL Certificate For CPanel
Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP
Detect AdBlocker With Javascript And Increase Website Ads Revenue
Laravel Clear Cache Of Route, View, Config Command
What Is Composer? How Does It Work? Useful Composer Commands And Usage
Setup Docker for NodeJs, MongoDB, MongoDB Compass
Use Different PHP Versions In Ubuntu / Linux
Run Raw Queries Securely In Laravel
Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It
Localization In Laravel REST API
Plain PHP Resumable Large File Uploads In Chunks Using FlowJs