country state city drop down list using javascript in html

<div class="container">
        <div class="header">
            <div class="icon">🌍</div>
            <h1>Location Selector</h1>
            <p>Select your country, state, and city</p>
        </div>

        <form id="locationForm">
            <div class="form-group">
                <label for="country">Country</label>
                <select id="country" onchange="loadStates()">
                    <option value="">Select Country</option>
                </select>
            </div>

            <div class="form-group">
                <label for="state">State / Province</label>
                <select id="state" disabled onchange="loadCities()">
                    <option value="">Select State</option>
                </select>
            </div>

            <div class="form-group">
                <label for="city">City</label>
                <select id="city" disabled>
                    <option value="">Select City</option>
                </select>
            </div>

            <button type="submit" class="submit-btn">Submit Selection</button>
        </form>

        <div class="result" id="result">
            <h3>✓ Your Selection</h3>
            <div class="result-item">
                <span class="result-label">Country:</span>
                <span class="result-value" id="resultCountry">-</span>
            </div>
            <div class="result-item">
                <span class="result-label">State:</span>
                <span class="result-value" id="resultState">-</span>
            </div>
            <div class="result-item">
                <span class="result-label">City:</span>
                <span class="result-value" id="resultCity">-</span>
            </div>
        </div>
    </div> 

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 500px;
            padding: 40px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 28px;
            background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .header p {
            color: #6c757d;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
        }

        select {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            font-size: 15px;
            color: #2d3748;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ee0979' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
        }

        select:focus {
            outline: none;
            border-color: #ee0979;
            box-shadow: 0 0 0 3px rgba(238, 9, 121, 0.1);
        }

        select:disabled {
            background-color: #f8f9fa;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .submit-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(238, 9, 121, 0.3);
            margin-top: 32px;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(238, 9, 121, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .result {
            margin-top: 32px;
            padding: 20px;
            background: linear-gradient(135deg, rgba(238, 9, 121, 0.1) 0%, rgba(255, 106, 0, 0.1) 100%);
            border-radius: 12px;
            border-left: 4px solid #ee0979;
            display: none;
        }

        .result.show {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .result h3 {
            color: #ee0979;
            font-size: 16px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            color: #2d3748;
            font-size: 14px;
        }

        .result-label {
            font-weight: 600;
            color: #6c757d;
        }

        .result-value {
            font-weight: 500;
        }

        .icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin: 0 auto 20px;
        }

      // Location data structure
        const locationData = {
            "United States": {
                "California": ["Los Angeles", "San Francisco", "San Diego", "Sacramento", "San Jose"],
                "Texas": ["Houston", "Dallas", "Austin", "San Antonio", "Fort Worth"],
                "New York": ["New York City", "Buffalo", "Rochester", "Albany", "Syracuse"],
                "Florida": ["Miami", "Orlando", "Tampa", "Jacksonville", "Fort Lauderdale"]
            },
            "Canada": {
                "Ontario": ["Toronto", "Ottawa", "Mississauga", "Hamilton", "London"],
                "Quebec": ["Montreal", "Quebec City", "Laval", "Gatineau", "Longueuil"],
                "British Columbia": ["Vancouver", "Victoria", "Surrey", "Burnaby", "Richmond"],
                "Alberta": ["Calgary", "Edmonton", "Red Deer", "Lethbridge", "Medicine Hat"]
            },
            "United Kingdom": {
                "England": ["London", "Manchester", "Birmingham", "Leeds", "Liverpool"],
                "Scotland": ["Edinburgh", "Glasgow", "Aberdeen", "Dundee", "Inverness"],
                "Wales": ["Cardiff", "Swansea", "Newport", "Wrexham", "Barry"],
                "Northern Ireland": ["Belfast", "Derry", "Lisburn", "Newry", "Armagh"]
            },
            "India": {
                "Maharashtra": ["Mumbai", "Pune", "Nagpur", "Nashik", "Thane"],
                "Karnataka": ["Bangalore", "Mysore", "Mangalore", "Hubli", "Belgaum"],
                "Tamil Nadu": ["Chennai", "Coimbatore", "Madurai", "Tiruchirappalli", "Salem"],
                "Delhi": ["New Delhi", "Delhi Cantonment", "Narela", "Karol Bagh", "Dwarka"]
            },
            "Australia": {
                "New South Wales": ["Sydney", "Newcastle", "Wollongong", "Central Coast", "Wagga Wagga"],
                "Victoria": ["Melbourne", "Geelong", "Ballarat", "Bendigo", "Shepparton"],
                "Queensland": ["Brisbane", "Gold Coast", "Sunshine Coast", "Townsville", "Cairns"],
                "Western Australia": ["Perth", "Fremantle", "Mandurah", "Bunbury", "Albany"]
            }
        };

        const countrySelect = document.getElementById('country');
        const stateSelect = document.getElementById('state');
        const citySelect = document.getElementById('city');
        const form = document.getElementById('locationForm');
        const result = document.getElementById('result');

        // Initialize: Load countries
        function init() {
            Object.keys(locationData).forEach(country => {
                const option = document.createElement('option');
                option.value = country;
                option.textContent = country;
                countrySelect.appendChild(option);
            });
        }

        // Load states based on selected country
        function loadStates() {
            const country = countrySelect.value;
            
            // Reset state and city
            stateSelect.innerHTML = '<option value="">Select State</option>';
            citySelect.innerHTML = '<option value="">Select City</option>';
            stateSelect.disabled = true;
            citySelect.disabled = true;
            result.classList.remove('show');

            if (country && locationData[country]) {
                const states = Object.keys(locationData[country]);
                states.forEach(state => {
                    const option = document.createElement('option');
                    option.value = state;
                    option.textContent = state;
                    stateSelect.appendChild(option);
                });
                stateSelect.disabled = false;
            }
        }

        // Load cities based on selected state
        function loadCities() {
            const country = countrySelect.value;
            const state = stateSelect.value;
            
            // Reset city
            citySelect.innerHTML = '<option value="">Select City</option>';
            citySelect.disabled = true;
            result.classList.remove('show');

            if (country && state && locationData[country][state]) {
                const cities = locationData[country][state];
                cities.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
                citySelect.disabled = false;
            }
        }

        // Handle form submission
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const country = countrySelect.value;
            const state = stateSelect.value;
            const city = citySelect.value;

            if (country && state && city) {
                document.getElementById('resultCountry').textContent = country;
                document.getElementById('resultState').textContent = state;
                document.getElementById('resultCity').textContent = city;
                result.classList.add('show');
            } else {
                alert('Please select country, state, and city!');
            }
        });

        // Initialize on page load
        init();