How to Setup and Use Select2 - WebJourney
This tutorial is based on select2. Today i will show you how to setup and use select2 with any project. Also i will explain the uses of single and multiple dropdown options, placeholder setup of select2 very simply. Let's follow the below guidelines how we set and use the select2.
What is Select2?
Select2 is a popular JavaScript library that extent the functionality of HTML <select> elements. It provides an improved user experience by adding features such as searchability, multi-select options, remote data loading, and customizable appearance.
What are the common use cases and benefits of Select2?
1. Enhanced Dropdowns: Select2 replaces the standard HTML <select> dropdown with an interactive one that helps users to search for options within the dropdown. This is particularly useful when dealing with long lists or when the number of options is extensive.
2. Multi-Select Support: Select2 enables the selection of multiple options simultaneously, making it useful for scenarios where users need to choose multiple items from a dropdown.
3. Remote Data Loading: Select2 supports fetching data from a remote data source, such as a server-side script or an API. It can dynamically load options based on user input, which is beneficial when dealing with large datasets.
Select2 Requirement:
We only need select2 css and js script to use select2. You can download or use the below cdn link where you want to use select2.
<!-- Latest select2 css -->
https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css
<!-- Latest select2 js -->
https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js
Now Let's see the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Select2 Integrate By WebJourney</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- select2 css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
</head>
<body>
<!-- Successful area Starts -->
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-3 mb-5">
<label class="mb-2">Select Country</label>
<select class="form-select" id="country">
<option value=""></option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">Bangladesh</option>
</select>
</div>
<br><br><br><br><br><br><br><br>
<div class="col-md-6 offset-3 mt-5">
<label class="mb-2">Select State</label>
<select class="form-select" id="state" multiple>
<option value=""></option>
<option value="1">New York</option>
<option value="2">California</option>
<option value="3">Dhaka</option>
<option value="3">Chattagram</option>
</select>
</div>
</div>
</div>
<!-- Successful area end -->
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- Latest select2 js -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#country').select2({
placeholder: "Select a Country",
});
$('#state').select2({
placeholder: "Select States",
});
});
</script>
</body>
</html>
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support