Formularfelder

E

Ec16

Hallo,
habe mir ein Formular gebastelt in dem man per DropDown Feld das Land auswählen kann. Nun möchte ich es aber auch so haben das man neben diesem DropDown Feld für das Land noch ein DropDown Feld angezeigt bekommt wo man dann das Bundesland bzw. Kanton auswählen kann. Nur möchte ich es so haben das automatisch wenn man im Feld Land z.B. Deutschland auswählt, im Feld Bundesland die Deutschen Bundesländer erscheinen und nicht alle Bundesländer.
Wie kann ich das in die Wirklichkeit umsetzen?
Gibt es da schon was fertiges?

Danke schon mal.
 
Code: 
window.addEventListener('DOMContentLoaded', function () {
  var states = {
    de: [
      'Baden-Würtemberg',
      'Bayern',
      'Berlin',
      'Brandenburg',
      'Bremen',
      'Hamburg',
      'Hessen',
      'Mecklenburg-Vorpommern',
      'Niedersachsen',
      'Nordrhein-Westfalen',
      'Rheinland-Pfalz',
      'Saarland',
      'Sachsen',
      'Sachsen-Anhalt',
      'Schleswig-Holstein',
      'Thüringen'
      ],
    au: [],
    ch: []
  };
  var country = document.getElementById('registry-countries');
  country.addEventListener('change', function () {
    var element = document.getElementById('registry-states');
    element.innerHTML = '';
    for(var i = 0; i < states[this.value].length; ++i) {
      var option = document.createElement('option');
      option.innerText = states[this.value][i];
      element.appendChild(option);
    }
  }, false);
}, false);

HTML: 
<form action="">
  <select id="registry-countries" name="registry[country]" size="1">
    <option value="de">Deutschland</option>
    <option value="au">Österreich</option>
    <option value="ch">Schweiz</option>
  </select>
  <select id="registry-states" name="registry[state]" size="1"></select>
</form>
.. das kannst du hier direkt ausprobieren: http://jsfiddle.net/MeiKatz/yFJGT/2/
 
Zuletzt bearbeitet:
Dann wechsle erstmal zu einem anderen Land und dann zurück zu Deutschland. Für die anderen beiden Länder ist auch nichts definiert.

Nachtrag: Ich habe jetzt alle Bundesländer und Kantone eingetragen und es werden jetzt auch vom Anfang an die deutschen Bundesländer angezeigt: http://jsfiddle.net/MeiKatz/yFJGT/4/
 
Zuletzt bearbeitet:
Der Bildschirm ist doch in vier Bereiche geteilt: CSS, HTML, Javascript und Ausgabe. Letzteres ist interessant und das ist das rechts unten. Dort steht sogar bei dir Deutschland. Wenn du dort drauf klickst, sollte sich das Ganze ändern.
 
Mh, komisch. Ansonsten kopierst du dir einfach den Quelltext, fügst ihn in eine eigene HTML-Datei ein und führst es bei dir lokal aus. Ist letztendlich das Gleiche.
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Länderauswahl</title>
  <script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function () {
    var states = {
      de: [
        'Baden-Würtemberg',
        'Bayern',
        'Berlin',
        'Brandenburg',
        'Bremen',
        'Hamburg',
        'Hessen',
        'Mecklenburg-Vorpommern',
        'Niedersachsen',
        'Nordrhein-Westfalen',
        'Rheinland-Pfalz',
        'Saarland',
        'Sachsen',
        'Sachsen-Anhalt',
        'Schleswig-Holstein',
        'Thüringen'
        ],
      au: [
        'Burgenland',
        'Kärnten',
        'Niederösterreich',
        'Oberösterreich',
        'Salzburg',
        'Steiermark',
        'Tirol',
        'Vorarlberg',
        'Wien'
        ],
      ch: [
        'Zürich',
        'Bern',
        'Luzern',
        'Uri',
        'Schwyz',
        'Obwalden',
        'Nidwalden',
        'Glarus',
        'Zug',
        'Freiburg',
        'Solothurn',
        'Basel-Stadt',
        'Basel-Landschaft',
        'Schaffhausen',
        'Appenzell Ausserrhoden',
        'Appenzell Innerrhoden',
        'St. Gallen',
        'Graubünden',
        'Aargau',
        'Thurgau',
        'Tessin',
        'Waadt',
        'Wallis',
        'Neuenburg',
        'Genf',
        'Jura'
        ]
    };
    var country = document.getElementById('registry-countries');
    var element = document.getElementById('registry-states');
    for(var i = 0; i < states['de'].length; ++i) {
      var option = document.createElement('option');
      option.innerText = states['de'][i];
      element.appendChild(option);
    }
    country.addEventListener('change', function() {
      var element = document.getElementById('registry-states');
      element.innerHTML = '';
      for(var i = 0; i < states[this.value].length; ++i) {
        var option = document.createElement('option');
        option.innerText = states[this.value][i];
        element.appendChild(option);
      }
    }, false);
  }, false);
  </script>
</head>
<body>
  <form action="">
    <select id="registry-countries" name="registry[country]" size="1">
      <option value="de">Deutschland</option>
      <option value="au">Österreich</option>
      <option value="ch">Schweiz</option>
    </select>
    <select id="registry-states" name="registry[state]" size="1"></select>
  </form>
</body>
</html>
 
Zuletzt bearbeitet:
Kann man den Quelltext mal sehen? (Bei mir lokal läuft es problemlos: Chrome 16.0.912.77, Mac OS 10.6.7)
 
Zuletzt bearbeitet:
Firefox müsste doch auch eine Javascript-Fehlerkonsole haben. Schau mal da nach, was dir angezeigt wird. Ansonsten installiere mal das Addon Firebug
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück