dropdown aus Java laden
obertroll
- javascript
0 Der Hartmut0 obertroll0 Der Hartmut
An alle hilfsbereiten Mittmenschen!
Ich möchte in Abhängigkeit von einer vorher erzeugten Variablen. Die Begriffe in einem Dropdown-Menü definieren.
Ein Menü sollte beinhalten: "Keine"; "eine Schublade" ; "zwei Schubladen" usw. Das alternativ-Menü: "Keine"; "Wandabstützung"; "ein Stützbein"; "zwei... usw.
Also entweder das eine oder das andere! Nicht alle Begriffe in einem Dropdown-Menü.
Bitte eine einfache Erklärung, bin Anfänger!
Danke für die Hilfestellung
Hallo Obertroll,
Ich möchte in Abhängigkeit von einer vorher erzeugten Variablen. Die Begriffe in einem Dropdown-Menü definieren.
Ein Menü sollte beinhalten: "Keine"; "eine Schublade" ; "zwei Schubladen" usw. Das alternativ-Menü: "Keine"; "Wandabstützung"; "ein Stützbein"; "zwei... usw.
Also entweder das eine oder das andere! Nicht alle Begriffe in einem Dropdown-Menü.
Verstehe ich Dich richtig?
Hartmut
Hallo Obertroll,
Ich möchte in Abhängigkeit von einer vorher erzeugten Variablen. Die Begriffe in einem Dropdown-Menü definieren.
Ein Menü sollte beinhalten: "Keine"; "eine Schublade" ; "zwei Schubladen" usw. Das alternativ-Menü: "Keine"; "Wandabstützung"; "ein Stützbein"; "zwei... usw.
Also entweder das eine oder das andere! Nicht alle Begriffe in einem Dropdown-Menü.Verstehe ich Dich richtig?
- Du baust die Seite per Java? Oder liegt die Variable erst zur Laufzeit der Website vor und das Menü muss per Javascript aufgebaut werden?
- Es gibt nur zwei alternativen für ein DropDown-Menü? Also wenn Deine (Java) Variable beispielsweise false ist, soll Menü 1 und bei true Menü 2 angezeigt werden?
Hartmut
Hallo Hartmut
Die Seite ist aufgebaut und in einem Menü wird die Vorauswahl getroffen. Der Inhalt des Dropdown soll bei dieser Vorauswahl festgelegt werden.
Jetzt soll genau das Ablaufen was du als die Alternativen richtig verstanden hast. Allerdings nicht mit false und true, da es insgesamt 9 Varianten gibt. Aber die Zuordnung eines Wertes dürfte das geringste Problem sein. In allen Fällen ist beim Start der Seite der Hinweis zuerst die Vorauswahl und dann werden die Varianten angeboten.
Alle Varianten beginnen mit:
<option selected>bitte auswählen</option>
und jetzt kämen die unterschiedlichen Menüs
Der Obertroll
Hallo Obertroll,
ich wiederhole mich nochmal:
Zu welchem Zeitpunkt soll das Menü mit den unterschiedlichen Menüpunkten gefüllt werden. Auf der Serverseite (per Java)?
Oder ist die Überschrift nur irreführend?
Die Seite ist aufgebaut und ...
Oder liegt die Variable erst zur Laufzeit der Website vor?
Soll heißen die Website ist fertig beim Benutzer im Browser und abhängig von einer Benutzerauswahl im Browser (Variable) soll das Menü jetzt angepasst werden (Javascript)?
Vielleicht kopierst Du mal den Quellcode-Teil hierher in dem die Auswahl (Variable) stattfindet mit ein paar Zeilen darüber und darunter, wenn schon nicht der gesamte Quellcode?
Hartmut
Hallo Obertroll,
ich wiederhole mich nochmal:
Zu welchem Zeitpunkt soll das Menü mit den unterschiedlichen Menüpunkten gefüllt werden. Auf der Serverseite (per Java)?
Oder ist die Überschrift nur irreführend?Die Seite ist aufgebaut und ...
Oder liegt die Variable erst zur Laufzeit der Website vor?
Soll heißen die Website ist fertig beim Benutzer im Browser und abhängig von einer Benutzerauswahl im Browser (Variable) soll das Menü jetzt angepasst werden (Javascript)?Vielleicht kopierst Du mal den Quellcode-Teil hierher in dem die Auswahl (Variable) stattfindet mit ein paar Zeilen darüber und darunter, wenn schon nicht der gesamte Quellcode?
Hartmut
Die Variable liegt erst zur Laufzeit der Website vor?
Soll heißen die Website ist fertig beim Benutzer im Browser und abhängig von einer Benutzerauswahl im Browser (Variable) soll das Menü jetzt angepasst werden (Javascript)?
Genau so meinte ich das!
Hier wird die Vorauswahl getroffen:
<option selected>keine</option>
<option value="SL_1-100">1</option>
<option value="SB_2-1-100">2</option>
<option value="SB_3-1-100">3</option>
und in Abhängigkeit der Variablen=1 ..=2 ..=3 usw. sollen die Inhalte des zweiten Dropdown unterschiedlich sein
obertroll
Hallo,
und in Abhängigkeit der Variablen=1 ..=2 ..=3 usw. sollen die Inhalte des zweiten Dropdown unterschiedlich sein
vielleicht suchst du etwas wie
http://aktuell.de.selfhtml.org/artikel/javascript/verkettete-auswahllisten/
Gruß plan_B
Hallo,
und in Abhängigkeit der Variablen=1 ..=2 ..=3 usw. sollen die Inhalte des zweiten Dropdown unterschiedlich sein
vielleicht suchst du etwas wie
http://aktuell.de.selfhtml.org/artikel/javascript/verkettete-auswahllisten/
Gruß plan_B
Danke für den Tipp.
In meiner Anfrage weise ich darauf hin, dass ich Anfänger bin. Ich habe es mit dem SELFHTML-Beispiel durchgespielt. So ähnlich dachte ich mir das Ganze. Leider 'ne Nummer zu groß für mich. Wenn's was übersichtlicheres gibt, wäre ich dankbar, sonst muß ich mir wohl was (gestalterisch)Anderes einfallen lassen.
Hab mir das jedenfalls gespeichert, vieleicht wenn ich 'nen Durchblickerlehrgang mache klappt's später mal mit dem Verständnis.
8-(
Obertroll
Hallo,
... Wenn's was übersichtlicheres gibt, wäre ich dankbar, sonst muß ich mir wohl was (gestalterisch)Anderes einfallen lassen.
es ginge auch einfacher, wenn dir eine statische Methode genügen würde. Für jede Untermenuegruppe könntest du ein eigenes <select> anlegen und diese per style="display:none" ausblenden. Und in Abhängigkeit deiner Variablen das passende select wieder anzeigen.
Gruß plan_B
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
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