Indian Location Dropdowns Usage Guide
1. Purpose:
This HTML page allows users to select Indian states, districts, sub-districts, and villages using dropdown menus. The data for these dropdowns is fetched dynamically from APIs provided by https://api.mportal.in.
2. Interface Overview:
Upon loading the page, users will see four dropdown menus stacked vertically, labeled as follows:
- State Dropdown: Select Indian state.
- District Dropdown: Select district within the chosen state.
- Sub-District Dropdown: Select sub-district within the chosen district.
- Village Dropdown: Select village within the chosen sub-district.
3. Usage Steps:
Step 1: Select State
- Begin by clicking on the “Select State” dropdown.
- Choose the desired Indian state from the available options.
- Upon selection, the “District Dropdown” will populate with districts corresponding to the chosen state.
Step 2: Select District
- After selecting a state, click on the “Select District” dropdown.
- Choose the district from the options provided.
- Once a district is chosen, the “Sub-District Dropdown” will populate with sub-districts under the selected district.
Step 3: Select Sub-District
- Click on the “Select Sub-District” dropdown.
- Choose the desired sub-district from the available options.
- Upon selection, the “Village Dropdown” will populate with villages corresponding to the chosen sub-district.
Step 4: Select Village
- Finally, click on the “Select Village” dropdown.
- Choose the village from the options provided.
4. Fetching Data:
- Data for each dropdown is fetched dynamically from the APIs provided by
https://api.mportal.in. - The JavaScript functions automatically retrieve and populate the dropdowns based on the user’s selections.
5. Notes:
- The dropdowns are interconnected, meaning the options available in each subsequent dropdown are dependent on the selection made in the preceding dropdown.
- If a user changes their selection in an earlier dropdown, the options in the subsequent dropdowns will update accordingly.
- Users can refine their selection by navigating through the dropdowns until they find the desired location.
6. Important:
- Ensure a stable internet connection to fetch data from the APIs.
- In case of any errors or issues with loading data, verify the API endpoints and network connectivity.
7. Example Usage:
- This interface can be integrated into websites or applications requiring location-based data selection for various purposes like address forms, location-based services, etc.
8. Credits:
- The data fetching and dropdown population functionalities are implemented using JavaScript.
- APIs used in this interface are provided by
https://api.mportal.in.
9. Additional Customization:
- Developers can modify the styling, add error handling, or extend the functionality as per their requirements.
10. Compatibility:
- This interface is compatible with modern web browsers and can be accessed on desktop or mobile devices.
By following these steps, users can effectively utilize the provided HTML page to select Indian states, districts, sub-districts, and villages through dropdown menus populated dynamically using APIs.
Below is a usage guide for creating an HTML page with JavaScript that utilizes APIs to populate dropdown selection menus for Indian states, districts, sub-districts, and villages:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Location Dropdowns</title>
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.fade-in {
animation: fadeInAnimation ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.bounce-animation {
animation: bounceAnimation 0.5s ease-in-out;
animation-iteration-count: 1;
}
@keyframes bounceAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="container">
<h4>Indian Location Dropdowns</h4>
<!-- Dropdowns for Indian States, Districts, Sub-Districts, and Villages -->
<div class="row mt-3">
<div class="col-md-3 fade-in mb-2">
<select id="stateDropdown" class="form-select">
<option value="">Select State</option>
</select>
</div>
<div class="col-md-3 fade-in mb-2">
<select id="districtDropdown" class="form-select">
<option value="">Select District</option>
</select>
</div>
<div class="col-md-3 fade-in mb-2">
<select id="subDistrictDropdown" class="form-select">
<option value="">Select Sub-District</option>
</select>
</div>
<div class="col-md-3 fade-in">
<select id="villageDropdown" class="form-select">
<option value="">Select Village</option>
</select>
</div>
</div>
</div>
<script>
var districtBounceTriggered = false;
var subDistrictBounceTriggered = false;
var villageBounceTriggered = false;
// Function to fetch Indian states from API
function fetchStates() {
$.get('https://api.mportal.in/api/location/states', function(data) {
const stateDropdown = $('#stateDropdown');
stateDropdown.html('<option value="">Select State</option>');
data.body.data.forEach(function(state) {
stateDropdown.append(`<option value="${state.StateCode}">${state.StateNameEnglish}</option>`);
});
});
}
// Function to fetch districts based on selected state
function fetchDistricts() {
const stateId = $('#stateDropdown').val();
if (stateId) {
$.get(`https://api.mportal.in/api/location/districts?state_id=${stateId}`, function(data) {
const districtDropdown = $('#districtDropdown');
districtDropdown.html('<option value="">Select District</option>');
data.body.data.forEach(function(district) {
districtDropdown.append(`<option value="${district.DistrictCode}">${district.DistrictName}</option>`);
});
// Triggering bounce animation
if (!districtBounceTriggered) {
$('#districtDropdown').addClass('bounce-animation');
setTimeout(function() {
$('#districtDropdown').removeClass('bounce-animation');
}, 500); // Adjust the delay time as needed
districtBounceTriggered = true;
}
});
}
}
// Function to fetch sub-districts based on selected district
function fetchSubDistricts() {
const districtId = $('#districtDropdown').val();
if (districtId) {
$.get(`https://api.mportal.in/api/location/subdistricts?district_id=${districtId}`, function(data) {
const subDistrictDropdown = $('#subDistrictDropdown');
subDistrictDropdown.html('<option value="">Select Sub-District</option>');
data.body.data.forEach(function(subDistrict) {
subDistrictDropdown.append(`<option value="${subDistrict.SubDistrictCode}">${subDistrict.SubDistrictName}</option>`);
});
// Triggering bounce animation
if (!subDistrictBounceTriggered) {
$('#subDistrictDropdown').addClass('bounce-animation');
setTimeout(function() {
$('#subDistrictDropdown').removeClass('bounce-animation');
}, 500); // Adjust the delay time as needed
subDistrictBounceTriggered = true;
}
});
}
}
// Function to fetch villages based on selected sub-district
function fetchVillages() {
const subDistrictId = $('#subDistrictDropdown').val();
if (subDistrictId) {
$.get(`https://api.mportal.in/api/location/villages?subdistrict_id=${subDistrictId}`, function(data) {
const villageDropdown = $('#villageDropdown');
villageDropdown.html('<option value="">Select Village</option>');
data.body.data.forEach(function(village) {
villageDropdown.append(`<option value="${village.VillageCode}">${village.VillageNameEnglish}</option>`);
});
// Triggering bounce animation
if (!villageBounceTriggered) {
$('#villageDropdown').addClass('bounce-animation');
setTimeout(function() {
$('#villageDropdown').removeClass('bounce-animation');
}, 500); // Adjust the delay time as needed
villageBounceTriggered = true;
}
});
}
}
// Fetch states when the page loads
fetchStates();
// Event listeners for dropdown changes
$('#stateDropdown').change(function() {
fetchDistricts();
});
$('#districtDropdown').change(function() {
fetchSubDistricts();
});
$('#subDistrictDropdown').change(function() {
fetchVillages();
});
</script>
</body>
</html>
This HTML file includes four dropdowns for selecting Indian states, districts, sub-districts, and villages. JavaScript functions are provided to fetch data from the APIs and populate the dropdowns dynamically based on user selections.