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!

All versions