Auswahlmenüs in Formularen

[*jiriki*]

Moin,

Ich suche einen Beispielcode für folgendes Problem:

Ich hab zwei Formularfelder, jeweils Auswahlmenüs. Jetzt soll abhängig von der Auswahl im ersten Feld, das zweite eine Auswahl anbieten.

Beispielcode, oder ein Schlagwort zur Suche werden dankbar entgegengenommen.

Greets und danke, *jiriki*

[HaThoV]

Moin,

Moin auch.

Ich hab zwei Formularfelder, jeweils Auswahlmenüs. Jetzt soll abhängig von der Auswahl im ersten Feld, das zweite eine Auswahl anbieten.

Ist doch ganz einfach. Du legst einen Array für die Auswahllisten 2er Ebene an und indizierst sie in der ersten. Dann ersetzt Du via DOM den Inhalt der Auswahlliste 2 aus dem Index der Auswahlliste 1 mit dem Inhalt des Vektors.

Oder was wolltest Du wissen?

servus,
HTV

[*jiriki*]

Mh, genau das weiss ich ja schon, also die Theorie. Ich hab aber kein Plan von Javascript-Syntax, also brauch ich sowas wie nen beispiel-Script oder nen Schlagwort, unter dem solche Menüs geführt werden.

Greets, *jiriki*

[HaThoV]

Ich hab aber kein Plan

Ohne Plan würd' ichs gar nicht erst versuchen. Mit Plan ist es simpel.

JS-Code-Saugersites, die sich diesem Problem widmen, sind mir nicht bekannt. Und einen JS-Programmierkurs für Anfänger mache ich hier auch nicht.

Mein Tip: SelfHTML durchstöbern nach folgenden Begriffen:

Array
select
option
selectedIndex
with (document){
getElementById
createElement
createTextNode
}
onchange

Greets, *jiriki*

hghzk
T.

[Gernot Back]

Hallo HaThoV,

JS-Code-Saugersites, die sich diesem Problem widmen, sind mir nicht bekannt. Und einen JS-Programmierkurs für Anfänger mache ich hier auch nicht.

Mein Tip: SelfHTML durchstöbern nach folgenden Begriffen:

Array
select
option
selectedIndex
with (document){
getElementById
createElement
createTextNode
}
onchange

wenn *jiriki* damit besser klarkommt, kann er sich ja auch erst einmal an dem Beispiel orientieren, dass die Quickbar in SelfHTML selbst darstellt. Das basiert allerdings auf Frames.

Gruß Gernot

[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";
}
}
}