Obertroll: dropdown manipulieren

Beitrag lesen

Hallo,

... Wenn's was übersichtlicheres gibt, wäre ich dankbar, sonst muß ich mir wohl was (gestalterisch)Anderes einfallen lassen.

Wolln mal schaun, ob Du das übersichtlicher findest.

es ginge auch einfacher, wenn dir eine statische Methode genügen würde.

Genau das steckt hier dahinter. Ich hab mal unter hotel-gut-hoeing.de auf der Buchungsseite in Abhängigkeit vom Zimmertyp die Bettenanzahl in DropDownlisten ausgefüllt. Allso vom Prinzip sowas, was Du auch planst.
Dabei sollte man daran denken, dass es auch user ohne JavaScript gibt.
Wer das auf der Seite durchspielen will, bitte dran denken, dass es eine Live-Buchungsmaske ist und die dritte Seite nicht mehr absenden. Das entsprechende Formular befindet sich auf Seite 2/3.

Hier nun die vereinfachten Ausschnitte aus dem Source der Seite:

Im Head:
<script language="JavaScript" TYPE="text/javascript">
function belegungslistefuellen() {
  text_belegungliste = new Array(document.forms[0].elements["belegung"].length);
  for (i=0;i<text_belegungliste.length;i++) {
    text_belegungliste[i] = document.forms[0].elements["belegung"].options[i].text;
  }
}
function belegungsaenderung() {
auswahlindex   = document.forms[0].elements["typ"].selectedIndex;
anzahlloeschen = document.forms[0].elements["belegung"].length;
for (i=0;i<anzahlloeschen;i++) {
   document.forms[0].elements["belegung"].options[0] = null;
}
neubelegungsanzahl = belegungssoll[auswahlindex].length;
for (i=0;i<neubelegungsanzahl;i++) {
   neubelegungsindex = belegungssoll[auswahlindex][i];
   document.forms[0].elements["belegung"].options[i] = new Option(text_belegungliste[neubelegungsindex], neubelegungsindex, false, false);
}
}
function vorbereitung() {
  belegungssoll = new Array();
  belegungssoll[0] = new Array("0","1");
  belegungssoll[1] = new Array("0","1","2");
  belegungssoll[2] = new Array("0","1","2");
  belegungssoll[3] = new Array("0","1","2","3");
  belegungslistefuellen();
  belegungsaenderung();
}
</script>

Im Body:
<body ... onLoad="vorbereitung();">

<form ...>
<select size="1" onChange="belegungsaenderung()" name="typ">
  <option value="0">Dependance</option>
  <option value="1">Gutshaus</option>
  <option value="2">Gesindehaus</option>
  <option value="3">Appartement</option>
</select>
<select size="1" name="belegung">
  <option value="0">Einzelzimmer</option>
  <option value="1">Doppelzimmer</option>
  <option value="2">Dreibettzimmer</option>
  <option value="3">Vierbettzimmer</option>
</select>
...
</form>

Damit Du durchblickst:
Zunächst wird onLoad (also nach dem Laden der Seite) die Funktion   vorbereitung()   aufgerufen.
Wie gesagt, für user ohne Javascript enthält die zweite DropDown-Liste   belegung   zunächst einmal alle möglichen Werte.
Dem Array   belegungssoll   wird nun für jeden   typ   ein Array der Werte die bei Auswahl im Feld   belegung   angezeigt werden sollen zugewiesen.
Anschließend wird   belegungslistefuellen()   aufgerufen. Hier werden alle aktuellen Werte von   belegung   in eine Array   text_belegungsliste[]   eingelesen.
Mit dem Aufruf   belegungsaenderung()   wird die DropDown-Liste   belegung   mit der aktuellen Einstellung belegt (Funktion s. unten) und die Seite ist Startbereit für eine Auswahl.

Wenn der user nun eine Auswahl in der DropDown-Liste   typ   vornimmt (onChange) wird erneut die Funktion   belegungsaenderung()   aufgerufen. Hier erhält   auswahlindex   den Wert der gemachten Auswahl (typ). Der Variable   anzahlloeschen   wird die Anzahl der Einträge in der DropDown-Liste   belegung   übergeben und in der folgenden Schleife werden alle Einträge (<option>) entfernt (auf null gesetzt).
Nun wird in   neubelegungsanzahl   die Anzahl der neu einzublendenden Einträge (inneres Array von   belegungssoll   für die getroffenen Auswahl) ermittelt. In der anschließenden Schleife werden nun entsprechend der bei   typ   getroffenen Auswahl im Array   belegungssoll[]   hinterlegten indizes durchlaufen. Der jeweiliger Index der im Array   text_belegungliste   zwischengespeicherten Originaleinträge wird in   neubelegungsindex  eingetragen. Anschließend wird die DropDown-Liste   belegung   Eintrag für Eintrag (option) neu aufgebaut. Das JavaScript-Object   Option   hat bis zu vier Parameter   Option([text[, value[, defaultSelected[, selected]]]]).

Ich hoffe das Du mit dieser Umfangreichen Erklärung in der Lage bist, Deine eigene DropDown-Liste mit entsprechenden Werten zu füllen.

Viel Erfolg

Hartmut

Das ist nachvollziehbar für mich, ich danke euch für die Tipps.
mit trolligem Dank euch beiden
Obertroll