Formular und Unterformular mit <select>

[Marco]

Hi!

Hab folgendes Problem:

Habe derzeit sehr langes Formular bestehend aus Haupt- und Unterkategorien.

Haupt1 / Unter1
Haupt1 / Unter2
Haupt1 / Unter3
Haupt2 / Unter1
Haupt2 / Unter2
Haupt3 / Unter1
...

Nun wöllte ich dies gern trennen, so daß 2 select-Felder (Auswahlfelder) zu sehen sind.

Eines mit allen Hauptkategorien und eines mit den zur Hauptkategorie passenden Unterkategorien. Also:

Hauptkategorien
haupt1
haupt2
haupt3
haupt4
...

Und wenn haupt2 ausgewählt, dann soll im Untermenü nur die Unterpunkte von haupt2 stehen, also:
haupt2 / unter1
haupt2 / unter2
...

Ich weiß, daß das geht, aber ich kann das nicht allein programmieren. Wäre froh, wenn es da schon ein Script gäbe, wo ich dann nur meine Kategorien eintragen brauch.

Vielen Dank für Eure Hilfe.

PS: Ich weiß, daß es auch die HTML-Variante mit optgroup gibt:
<select name="Namen" size=3>
 <optgroup label="Namen mit A">
  <option label="Anna">Anna</option>
  <option label="Achim">Achim</option>
  <option label="August">August</option>
 </optgroup>
 <optgroup label="Namen mit B">
  <option label="Berta">Berta</option>
  <option label="Barbara">Barbara</option>
  <option label="Bernhard">Bernhard</option>
 </optgroup>
(aus SelfHTML)
dann ist meine Liste aber trotzdem noch sehr lang und außerdem funktioniert das erst in den aller neusten Browsern. Also das bitte nicht vorschlagen. Bitte die JavaScript-Variante. Danke!

[Dmitri Rettig]

Hi,

ich würde dir gerne helfen, ich glaube ich hatte so ein änliches Problemchen mal, aber irdenwie verstehe ich dich nicht... Meinst du so etwas änliches wie die Quickbar in SELFHTML?

Gruß Dmitri

[Marco]

Hi,

ich würde dir gerne helfen, ich glaube ich hatte so ein änliches Problemchen mal, aber irdenwie verstehe ich dich nicht... Meinst du so etwas änliches wie die Quickbar in SELFHTML?

Gruß Dmitri

Ne, ne!

Nicht so eine Quickbar, wo dann bei jeder Auswahl gleich zu einer HTML-Seite hingesprungen wird (oder woanders hin).

Bei jedem Wechsel (onChange) soll die sich das 2. Select-Formfeld komplett ändern. Nochmal ein anderes Beispiel:

Select-Formfeld 1 enthält:

• "Namen mit A"
• "Namen mit B"
• "Namen mit C"
• ...

Das Select-Formfeld im selben Formular auf der selben HTML-Seite solch sich dann dementsprechend ändern (bei Auswahl von beispielsweise "Namen mit B") und soll NUR die entsprechenden Namen (mit B) anzeigen. Also zeigt es an:

• "Berta"
• "Bertram"
• "Betti"
• ...

Ich wäre dankbar, wenn ich schon ein Beispielscript bekäme. Vielen Dank!

Marco

[Stefan Muenz]

Hallo Marco,

Bei jedem Wechsel (onChange) soll die sich das 2. Select-Formfeld komplett ändern.

Gut, das heisst, du musst einzelne options loeschen und stattdessen andere wieder hinzufuegen. Das wird hier erklaert:
http://selfhtml.teamone.de/javascript/objekte/options.htm#neue_elemente und
http://selfhtml.teamone.de/javascript/objekte/options.htm#elemente_loeschen

viele Gruesse
  Stefan Muenz

[Marco]

Hallo Marco,

Bei jedem Wechsel (onChange) soll die sich das 2. Select-Formfeld komplett ändern.

Gut, das heisst, du musst einzelne options loeschen und stattdessen andere wieder hinzufuegen. Das wird hier erklaert:
http://selfhtml.teamone.de/javascript/objekte/options.htm#neue_elemente und
http://selfhtml.teamone.de/javascript/objekte/options.htm#elemente_loeschen

viele Gruesse
  Stefan Muenz

OK! Vielen Dank! Aber bei diesen Beispielen ist immer der Value-Wert gleich dem option-Wert im Auswahlfeld (value ist gar nicht erst integriert). Value und Option soll aber unterschiedlich sein (was im Auswahlfeld sichtbar ist, soll nicht gesendet werden, sondern bestimmte Nummern, die explizit dazu gehören.

Wie kann ich das in diese Script implementieren?

[Antje Hofmann]

Hallo Marco

Nun wöllte ich dies gern trennen, so daß 2 select-Felder (Auswahlfelder) zu sehen sind.

Eines mit allen Hauptkategorien und eines mit den zur Hauptkategorie passenden Unterkategorien. Also:

Und wenn haupt2 ausgewählt, dann soll im Untermenü nur die Unterpunkte von haupt2 stehen, also:
haupt2 / unter1
haupt2 / unter2
...
dann ist meine Liste aber trotzdem noch sehr lang und außerdem funktioniert das erst in den aller neusten Browsern. Also das bitte nicht vorschlagen. Bitte die JavaScript-Variante. Danke!

Aber gern hier die Zutaten:

du brauchst für jede Hauptgruppe ein Array, welches die Untergruppen enthält, gut machen sich hier assoziative Arrays http://selfhtml.teamone.de/javascript/objekte/array.htm#assoziative_arrays

den Eventhandler onchange http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onchange

eine Funktion die von onchange aufgerufen wird http://selfhtml.teamone.de/javascript/sprache/funktionen.htm

und in der du je nach gewähltes Hauptmenue die Menueeinträge im Untermenue löschts und wieder neu anlegst http://selfhtml.teamone.de/javascript/objekte/options.htm

alles gut mischen, garen lassen und fertig ist dein JS-Menue

Alternativ geht auch dieses Beispiel http://selfhtml.teamone.de/javascript/beispiele/verweisliste.htm

Gruß

Antje