# Dropdown mit Werten füllen



## dracom (6. April 2005)

Hallo

Ich habe folgendes Problem.
Ich habe ein mehrdimensionales Array.
In einem Formular wählt man ein Bundesland aus, dann soll in dem Formular für das jeweilige Bundesland die Städte angezeigt werden.

Das ist der Punkt an dem ich zur Zeit nicht weiterkomme.
Folgendes habe ich zur Zeit:
Das Dropdown für die Bundesländer:

<select name="bundesland" size="" onclick='hole_stadt(formular.bundesland.selectedIndex);'>
<option value="1">Baden-Württemberg<option value="2">Bayern<option value="3">Berlin
</select>

Die Javascript Funktion hole_stadt sieht so aus:
var stadt = new Array();
var stadt[1] = new Array();
stadt[1][1]='Heilbronn';
stadt[1][2]='Heidelberg';
var stadt[2] = new Array();
stadt[2][10]='Augsburg';
stadt[2][11]='Ingolstadt';
[...]

function hole_stadt ()
{
var Element = formular.bundesland.selectedIndex;
for(stadt[Element] in stadt3)
{
NeuerEintrag = new Option(document.formular.stadt.value, stadt3, false, true);
document.formular.stadt.options[document.formular.stadt.options.length] = NeuerEintrag;

}
return
}

Das ganze soll eigentlich folgendes machen:
Man wählt im Dropdown bsp Baden-Würtemberg und das darunterliegende Dropdown names Stadt soll dann die Städte enthalten.

Vielen Dank im voraus für jede Hilfe


----------



## Quaese (6. April 2005)

Hi,

die *for-in*-Schleife musst du anders verwenden:

```
for(stadt3 in stadt[Element]){...}
```
In *stadt3* steht in jedem Durchlauf der Index (bzw. Schlüssel) der aktuellen Komponente. Willst du 
also den Wert ansprechen, so erfolgt das folgendermassen:

```
stadt[Element][stadt3]
```

Weiterhin würde ich die Städteliste zu Beginn dynamisch aufbauen. Damit könntest du zum Aktualisieren
der Liste den *onchange*-Event verwenden.

Hier mein Lösungsvorschlag:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--

var stadt = new Array();
stadt[0] = new Array();
stadt[0][0]='Heilbronn';
stadt[0][1]='Heidelberg';
stadt[1] = new Array();
stadt[1][0]='Augsburg';
stadt[1][1]='Ingolstadt';
stadt[2] = new Array();

function hole_stadt(objSelect){
  // Selektierten Index und Formularobjekt holen
  var intIndex = objSelect.selectedIndex;
  var objForm = objSelect.form;

  // Alle Städt aus Select-Gruppe löschen
  objForm.stadt.length = 0;

  // Falls es sich um ein Bundesland handelt, zu dem keine Städte existieren
  if(stadt[intIndex].length == 0){
  	// Defaultwert als Option eintragen
    objOption = new Option("- Städte -", "default", false, true);
    objForm.stadt.options[objForm.stadt.options.length] = objOption;
    return;
  }

  // Alle Städte am entsprechenden Index des Städte-Arrays ausgeben
  for(stadt3 in stadt[intIndex]){
    objOption = new Option(stadt[intIndex][stadt3], stadt3, false, true);
    objForm.stadt.options[objForm.stadt.options.length] = objOption;
  }
  return;
}

 //-->
</script>
<style type="text/css">
  <!--
 //-->
</style>
</head>
<body>
<form action="" method="">
  <select size="" name="bundesland" onchange="hole_stadt(this);">
    <option value="0">Baden-Württemberg</option>
    <option value="1">Bayern</option>
    <option value="2">Berlin</option>
  </select>

  <script type="text/javascript">
  <!--
    // Selectgruppe dynamisch aufbauen
    document.write("<select name=\"stadt\" size=\"\">\n");
    // Optionen zum ersten Bundesland aufbauen
    for(var i=0; i<stadt[0].length; i++){
      document.write("<option value=\""+i+"\">"+stadt[0][i]+"</option>\n");
    }
    document.write("</select>\n");
  //-->
  </script>
</form>
</body>
</html>
```
Ich hoffe, das hilft dir weiter.

Ciao
Quaese


----------

