Get started with country-region-dropdown-menu CDN
MIT licensed
Library for dynamic country/region dropdown menus.
Tags:- geodatasource
- country
- region
- dropdown
- menu
Stable version
Copied!
How to start using country-region-dropdown-menu CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with country-region-dropdown-menu CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0-alpha1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.cdnhub.io/country-region-dropdown-menu/2.4.1/js/geodatasource-cr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/geocode.js/components/geocode.all.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-5">Country-Region Dropdown Menu Example</h1>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="form-group">
<label for="country">Select a country:</label>
<gs-select id="country" geo-item-selected="selectedCountry" geo-source="countries" class="form-control" placeholder="Select a country"></gs-select>
</div>
<div class="form-group">
<label for="region">Select a region:</label>
<gs-select id="region" geo-item-selected="selectedRegion" geo-source="regions" class="form-control" placeholder="Select a region"></gs-select>
</div>
</div>
</div>
</div>
<script>
const selectedCountry = (item) => {
console.log('Selected country:', item);
// Fetch regions based on the selected country
fetchRegions(item.isoCode);
};
const selectedRegion = (item) => {
console.log('Selected region:', item);
};
const fetchRegions = (countryCode) => {
const geocoder = new Geocode();
geocoder.setApiKey('YOUR_API_KEY');
geocoder.geocode({ q: countryCode }, (results, status) => {
if (status === 'OK') {
const countryLatLng = results[0].geometry.location;
const geocoderClient = new GeocodeClient({ geocoder });
geocoderClient.reverseGeocode({ latlng: countryLatLng }, (reverseResults, reverseStatus) => {
if (reverseStatus === 'OK') {
const regionsSource = new AdminDivisionsSource({
geocoder: geocoderClient,
bounds: reverseResults.geometry.viewport,
zoom: 11,
singleSelect: true,
idPropertyName: 'adminName',
textPropertyName: 'adminName'
});
document.getElementById('region').gsSource = regionsSource;
}
});
}
});
};
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!