Name: CountryDataAPI
Price: 9.99 USD
Rating: 4.8 (127 reviews)
Author: CountryDataAPI

Erstellen Sie professionelle Adressformulare mit kaskadierenden Land-, Bundesland- und Stadt-Selects

Lernen Sie, wie Sie ein vollständiges Adressformular mit Land → Bundesland → Stadt Dropdowns mit den Select-Endpunkten von CountryDataAPI erstellen.

Überblick

Diese Anleitung zeigt Ihnen, wie Sie kaskadierende Select-Eingaben erstellen für:

Länderauswahl - Alle verfügbaren Länder laden
Bundesland/Provinz-Auswahl - Gefiltert nach ausgewähltem Land
Stadtauswahl - Gefiltert nach ausgewähltem Bundesland

Die Select-Endpunkte sind für Formulare optimiert und geben nur die Felder id und name zurück für minimale Payload-Größe und maximale Leistung.

Voraussetzungen

Ein CountryDataAPI-Schlüssel (Holen Sie sich einen hier)
Grundkenntnisse in JavaScript und HTML
Moderner Webbrowser mit Fetch-API-Unterstützung

Schritt 1: Länder Laden

Laden Sie zunächst alle Länder beim Seitenaufruf. Länder ändern sich selten, daher können Sie diese Daten für bessere Leistung im localStorage zwischenspeichern.

const API_KEY = 'ihr-api-schluessel';
const BASE_URL = 'https://api.countrydataapi.com/v1';

async function loadCountries() {
  try {
    const response = await fetch(
      `${BASE_URL}/select/countries?apikey=${API_KEY}&lang=de`
    );
    const { success, data, error } = await response.json();

    if (!success) {
      console.error('API-Fehler:', error);
      return;
    }

    const countrySelect = document.getElementById('country');
    data.forEach(country => {
      const option = new Option(country.name, country.id);
      countrySelect.add(option);
    });
  } catch (err) {
    console.error('Netzwerkfehler:', err);
  }
}

// Beim Seitenladen aufrufen
document.addEventListener('DOMContentLoaded', loadCountries);

Tipp: Speichern Sie die Länderliste im localStorage zwischen, um wiederholte API-Aufrufe zu vermeiden. Länder ändern sich nicht häufig!

Schritt 2: Bundesländer Laden Wenn Sich das Land Ändert

Wenn ein Benutzer ein Land auswählt, laden Sie die entsprechenden Bundesländer/Provinzen und setzen Sie das Stadt-Dropdown zurück.

document.getElementById('country').addEventListener('change', async (e) => {
  const countryId = e.target.value;
  const stateSelect = document.getElementById('state');
  const citySelect = document.getElementById('city');

  // Bundesland- und Stadt-Dropdowns zurücksetzen
  stateSelect.innerHTML = '<option value="">Bundesland auswählen...</option>';
  citySelect.innerHTML = '<option value="">Stadt auswählen...</option>';
  stateSelect.disabled = true;
  citySelect.disabled = true;

  if (!countryId) return;

  try {
    const response = await fetch(
      `${BASE_URL}/select/states?apikey=${API_KEY}&country=${countryId}&lang=de`
    );
    const { success, data, error } = await response.json();

    if (!success) {
      console.error('API-Fehler:', error);
      return;
    }

    data.forEach(state => {
      stateSelect.add(new Option(state.name, state.id));
    });

    stateSelect.disabled = false;
  } catch (err) {
    console.error('Netzwerkfehler:', err);
  }
});

Schritt 3: Städte Laden Wenn Sich das Bundesland Ändert

Laden Sie abschließend die Städte, wenn ein Bundesland ausgewählt wird.

document.getElementById('state').addEventListener('change', async (e) => {
  const stateId = e.target.value;
  const citySelect = document.getElementById('city');

  // Stadt-Dropdown zurücksetzen
  citySelect.innerHTML = '<option value="">Stadt auswählen...</option>';
  citySelect.disabled = true;

  if (!stateId) return;

  try {
    const response = await fetch(
      `${BASE_URL}/select/cities?apikey=${API_KEY}&state=${stateId}&lang=de`
    );
    const { success, data, error } = await response.json();

    if (!success) {
      console.error('API-Fehler:', error);
      return;
    }

    data.forEach(city => {
      citySelect.add(new Option(city.name, city.id));
    });

    citySelect.disabled = false;
  } catch (err) {
    console.error('Netzwerkfehler:', err);
  }
});

Vollständiges HTML-Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adressformular - CountryDataAPI</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
    }
    select {
      width: 100%;
      padding: 10px;
      border: 2px solid #e2e8f0;
      border-radius: 6px;
      font-size: 16px;
      background-color: white;
      cursor: pointer;
    }
    select:disabled {
      background-color: #f7fafc;
      cursor: not-allowed;
      opacity: 0.6;
    }
    select:focus {
      outline: none;
      border-color: #3b82f6;
    }
    button {
      background-color: #3b82f6;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
    }
    button:disabled {
      background-color: #cbd5e0;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>Adressformular</h1>

  <form id="address-form">
    <div class="form-group">
      <label for="country">Land *</label>
      <select id="country" name="country" required>
        <option value="">Land auswählen...</option>
      </select>
    </div>

    <div class="form-group">
      <label for="state">Bundesland *</label>
      <select id="state" name="state" required disabled>
        <option value="">Bundesland auswählen...</option>
      </select>
    </div>

    <div class="form-group">
      <label for="city">Stadt *</label>
      <select id="city" name="city" required disabled>
        <option value="">Stadt auswählen...</option>
      </select>
    </div>

    <div class="form-group">
      <label for="street">Straße *</label>
      <input type="text" id="street" name="street" required
             style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 6px;">
    </div>

    <button type="submit">Adresse Absenden</button>
  </form>

  <script src="address-form.js"></script>
</body>
</html>

Formularübermittlung

Behandeln Sie die Formularübermittlung, um die ausgewählten Werte zu erhalten:

document.getElementById('address-form').addEventListener('submit', (e) => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const address = {
    country: formData.get('country'),
    state: formData.get('state'),
    city: formData.get('city'),
    street: formData.get('street')
  };

  console.log('Adresse übermittelt:', address);

  // An Ihr Backend senden oder nach Bedarf verarbeiten
  // fetch('/api/save-address', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(address)
  // });
});

Token-Verbrauch

Diese Implementierung ist sehr effizient beim Token-Verbrauch:

1 Token zum Laden der Länder (einmal pro Seitenaufruf, kann zwischengespeichert werden)
1 Token pro Bundesland-Abfrage (wenn der Benutzer ein Land auswählt)
1 Token pro Stadt-Abfrage (wenn der Benutzer ein Bundesland auswählt)

Beispiel: Ein Benutzer, der das Formular vollständig ausfüllt, verbraucht nur 3 Tokens insgesamt.

Optimierungstipps

1. Länderdaten Zwischenspeichern

Länder ändern sich nicht oft. Speichern Sie sie im localStorage zwischen:

async function loadCountries() {
  const cached = localStorage.getItem('countries');

  if (cached) {
    const data = JSON.parse(cached);
    populateCountrySelect(data);
    return;
  }

  const response = await fetch(
    `${BASE_URL}/select/countries?apikey=${API_KEY}&lang=de`
  );
  const { success, data } = await response.json();

  if (success) {
    localStorage.setItem('countries', JSON.stringify(data));
    populateCountrySelect(data);
  }
}

function populateCountrySelect(countries) {
  const select = document.getElementById('country');
  countries.forEach(country => {
    select.add(new Option(country.name, country.id));
  });
}

2. Ladezustände Hinzufügen

Zeigen Sie visuelles Feedback während des Datenladens:

async function loadStates(countryId) {
  const stateSelect = document.getElementById('state');
  stateSelect.innerHTML = '<option>Wird geladen...</option>';
  stateSelect.disabled = true;

  // ... Bundesländer abrufen

  stateSelect.disabled = false;
}

3. Sucheingabe mit Debounce

Wenn Sie ein durchsuchbares Dropdown hinzufügen, verwenden Sie Debounce für die Eingabe:

let debounceTimer;
searchInput.addEventListener('input', (e) => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    filterOptions(e.target.value);
  }, 300);
});

4. Fehler Elegant Behandeln

Bieten Sie immer benutzerfreundliche Fehlermeldungen:

try {
  // API-Aufruf
} catch (err) {
  const select = document.getElementById('state');
  select.innerHTML = '<option>Fehler beim Laden der Bundesländer. Bitte erneut versuchen.</option>';
}

Mehrsprachige Unterstützung

Die API unterstützt mehrere Sprachen. Ändern Sie den lang-Parameter:

// Spanisch
`${BASE_URL}/select/countries?apikey=${API_KEY}&lang=es`

// Portugiesisch
`${BASE_URL}/select/countries?apikey=${API_KEY}&lang=pt`

// Französisch
`${BASE_URL}/select/countries?apikey=${API_KEY}&lang=fr`

// Deutsch
`${BASE_URL}/select/countries?apikey=${API_KEY}&lang=de`

// Italienisch
`${BASE_URL}/select/countries?apikey=${API_KEY}&lang=it`

Nächste Schritte

React-Integration - Benutzerdefinierte React-Hooks für Adressformulare
Vue-Integration - Vue 3 Composables für Adressformulare
Select Countries Referenz - API-Endpunkt-Dokumentation
Select States Referenz - API-Endpunkt-Dokumentation
Select Cities Referenz - API-Endpunkt-Dokumentation

Brauchen Sie Hilfe?

Wenn Sie Fragen haben oder Unterstützung benötigen:

Konsultieren Sie unsere Fehlercode-Dokumentation
Kontaktieren Sie den Support über Ihr Konto-Dashboard
Treten Sie unserer Entwickler-Community bei

Profi-Tipp: Für Produktionsanwendungen sollten Sie erwägen, eine benutzerdefinierte Dropdown-Komponente mit Suchfunktionalität zu implementieren, um Länder mit vielen Bundesländern/Städten zu handhaben. Bibliotheken wie Select2, Choices.js oder benutzerdefinierte Autocomplete können die Benutzererfahrung erheblich verbessern.

Dokumentation

Adressformular mit Kaskadierenden Selects