Auswahlmenüs in Formularen

[flashnfantasy]

Gehe mal folgenden Code durch, er funktioniert für alle Browser.
Habe damit eine komplette Verwaltung auf JS-Ebene geschaffen.
Bei dem Absenden des Formulars wird auch brauchbare Infos erzeugt.
Wie genau das aber jetzt geht weiß ich auch nicht mehr, ist schon einige Zeit her...

Ich glaube dfeld musste nur einmal definiert werden und ist dann die 'Datenbank'

/*

JS-Auswahllisten

das Datenfeld wird gefüllt mit
  [*] putSubs (dfeld, main, sub, index);
  wobei [sub] ein einzelnes Element der Unterauswahl von [main] ist und [sub] ein eindeutiger Namens-Bezeichner,
  wichtig nachher für die Formularverarbeitung...
  Bsp. putSubs (subs, 'Reptilien', 'Schlange', 673);

dfeld = new Array() global initialisiert.

Es wird eine Liste [dfeld] angelegt, in der die einzelnen Elemente folgende Eigenschaft haben:

name -> eindeutiger Bezeichner
    array -> weitere Liste mit Elementen.

Die Unterliste hat wiederum den Aufbau

name -> eindeutiger Bezeichner
    index -> zugeordnete ID.

[*] Mit makeOpt(dfeld, main, sub, id)
  wird in der Auswahlliste [main] das Element mit dem namen=[id] ausgewählt
  und in der Auswahlliste [sub] die Unterauswahl dieses Elementes aufgezeigt

[*] makeSub(dfeld, main, sub, textFeld, textid)
  ist die Auswahlfunktion.
  Im Kopf der der Auswahlliste steht etwa folgendes

<select name="main" onClick="makeSub(subs,'main','sub1','titel','ti'); makeSubGrey('sub2'); makeSubGrey('sub3');">

dabei ist

dfeld    = das Datenfeld
    main     = der Name der Auswahlliste
    sub      = der Name der Nachfolgeliste
    textfeld = ein Text-Feld, in die Auswahl angezeigt wird
    textid   = der Identifier, wichtig nachher für die Formularverarbeitung.
               Tip: Der Identifier kann auch in einem nicht sichtbaren Feld stehen.

*/

function putSubs(dfeld, main, sub, index)
{
var subA = null;
for (var i=0;  i < dfeld.length; i++)
{
   if (dfeld[i].name == main) subA = dfeld[i];
}
if (subA == null)
{
   subA = new Object();
   subA.array = new Array();
   subA.name = main;
   dfeld.push(subA);
}
entry = new Object();
entry.name = sub;
entry.index = index;
subA.array.push(entry);
}

function makeSubGrey(sub)
{
var subElement = document.getElementsByName(sub)[0];
if (subElement != null)
{
   subElement.style.backgroundColor = "#dddddd";
   subElement.innerHTML = "";
}
}

function makeOpt(dfeld, main, sub, id)
{
if (0 < id)
{
   var mainElement = document.getElementsByName(main)[0];
   var subElement = document.getElementsByName(sub)[0];

if (mainElement != null)
   {
     for (var i=0;  i < mainElement.options.length; i++)
     {
       thisOption = mainElement.options[i];
       if (thisOption.value == id) thisOption.selected = true;
       else thisOption.selected = false;
     }
   }

if (subElement != null)
   {
      var subA = null;
      subElement.style.backgroundColor = "#dddddd";
      subElement.length = 0;
      for (var i=0;  i < dfeld.length; i++)
      {
        if (dfeld[i].name == id) subA = dfeld[i];
      }
      if (subA != null)
      {

for (var j=0;  j < subA.array.length; j++)
        {
          subElement.options[subElement.length] = new Option(subA.array[j].name,subA.array[j].index,false,true);;
        }
        subElement.style.backgroundColor = "#ffffff";
      }
   }
}
}

function makeSub(dfeld, main, sub, textFeld, textid)
{
// Sucht aus Main das geklickte Feld
// Setzt in Sub das zugehörge unterfeld
var mainElement = document.getElementsByName(main)[0];
var subElement = document.getElementsByName(sub)[0];
var textElement = document.getElementsByName(textFeld)[0];
var textidElement = document.getElementsByName(textid)[0];

if (subElement != null)
{
   subElement.style.backgroundColor = "#dddddd";
   subElement.length = 0;
}

if (mainElement != null)
{
// Suchen des entsprechenden Eintrages
var subA = null;
for (var i=0;  i < mainElement.options.length; i++)
{
   thisOption = mainElement.options[i];
   if (thisOption.selected)
   {
     for (var j=0;  j < dfeld.length; j++)
     {
       if (dfeld[j].name == thisOption.value) subA = dfeld[j];
       //alert (thisOption.text);
     }
     if (textElement != null && textidElement != null)
     {
       textElement.value = thisOption.text;
       textidElement.value = thisOption.value;
     }
   }
}

// Erstellen des neuen Feldes
if (subA != null && subElement != null)
{
   for (var j=0;  j < subA.array.length; j++)
   {
     subElement.options[subElement.length] = new Option(subA.array[j].name,subA.array[j].index,false,true);
   }
   subElement.style.backgroundColor = "#ffffff";
}
}
}