# Formularfelder



## Ec16 (11. Februar 2012)

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.


----------



## Parantatatam (11. Februar 2012)

```
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);
```


```
<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/


----------



## Parantatatam (12. Februar 2012)

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/


----------



## Parantatatam (12. Februar 2012)

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.


----------



## Parantatatam (12. Februar 2012)

Mh, vielleicht geht es, wenn du oben auf _Run_ klickst.


----------



## Parantatatam (12. Februar 2012)

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.

```
<!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>
```


----------



## Parantatatam (13. Februar 2012)

Kann man den Quelltext mal sehen? (Bei mir lokal läuft es problemlos: Chrome 16.0.912.77, Mac OS 10.6.7)


----------



## Parantatatam (13. Februar 2012)

Bei mir geht's.


----------



## Parantatatam (13. Februar 2012)

Firefox müsste doch auch eine Javascript-Fehlerkonsole haben. Schau mal da nach, was dir angezeigt wird. Ansonsten installiere mal das Addon _Firebug_


----------



## Parantatatam (13. Februar 2012)

Fehler gefunden: Firefox unterstützt die Methode _innerText_ nicht. Da muss ein _innerHTML_ hin.

Nachtrag: http://jsfiddle.net/MeiKatz/yFJGT/5/ (aktualisiert)


----------



## Parantatatam (13. Februar 2012)

Du bekommst momentan den Wert zurück, der zwischen den beiden Tags steht. Du könntest das Problem aber beispielsweise so lösen: http://jsfiddle.net/MeiKatz/yFJGT/6/


----------

