Gernot Weber: Vorbelegung Dropdownfelder in Formular

Hallo Forum!

Ich habe folgendes Problem:
In einem Formular werden mehrere Dropdownfelder benutzt.
(Wieviele weiss ich vorher nicht, weil das Formular durch ein
cgi-script erzeugt wird, und die zugrundeliegenden Daten sich
jeweils ändern).

Das ganze sieht vom HTML-Code her so aus.

...
<p>
<select size="1" name="Liste1">
<option>Auswahl1</option>
<option>Auswahl2</option>
<option>Auswahl3</option>
...
</select>
...
<select size="1" name="Liste2">
<option>Auswahl1</option>
<option>Auswahl2</option>
<option>Auswahl3</option>
...
</select>

usw.

Die Anzahl der Auswahlmöglichkeiten pro Dropdownfeld ist vorher auch nicht bekannt, aber alle Dropdownfelder haben die gleichen Auswahlmöglichkeiten.

So jetzt zum eigentlichen Problem:
Ich möchte den Benutzer beim Ausfüllen des Formulares unterstützen. Das soll so laufen:
Wenn er in einem Dropdownfeld einen Eintrag auswählt, soll in dem nachfolgenden Dropdownfeld(wenn es denn eins gibt) der selbe Eintrag vorbelegt werden.

z.B User wählt in Liste2 die Auswahl3
-> Es wird geprüft: Gibt es eine Liste3, wenn ja Vorbelegung in Liste3=Auswahl3

Ich könnte mir vorstellen, dass sowas mit JAVA-Script geht,
Habe aber damit noch Null Erfahrung

Schönes Wochenende Allerseits
Gernot Weber

  1. Hallo Gernot,

    1. Möglichkeit:

    <form name="Formular">
    <select size="1" name="Liste1">
    <option onClick="document.Formular.Liste2.options[0].selected=true;">Auswahl1</option>
    <option onClick="document.Formular.Liste2.options[1].selected=true;">Auswahl2</option>
    <option onClick="document.Formular.Liste2.options[2].selected=true;">Auswahl3</option>
    ...
    </select>
    ...
    <select size="1" name="Liste2">
    <option>Auswahl1</option>
    <option>Auswahl2</option>
    <option>Auswahl3</option>
    ...
    </select>
    </form>

    2. Möglichkeit

    <script language="JavaScript>
    function check()
    {

    for(i = 0; i < document.Testform.Auswahl.length; i++)
       if(document.Formular.Liste1.options[i].defaultSelected == true)
         document.Formular.Liste2.options[i].selected=true;
    }
    </script>

    <form name="Formular">
    <select size="1" name="Liste1" onClick="check()">
    <option>Auswahl1</option>
    <option>Auswahl2</option>
    <option>Auswahl3</option>
    ...
    </select>
    ...
    <select size="1" name="Liste2">
    <option>Auswahl1</option>
    <option>Auswahl2</option>
    <option>Auswahl3</option>
    ...
    </select>
    </form>

    nicht getestet.

    1. Hallo Tausch!

      Vielen Dank für die schnelle Antwort, aber ich bin zu blöd!
      (Oder liegt an der mangelnden Erfahrung mit JAVA-Scipt)

      Nachfolgend mal der Code.
      Woran liegts?
      Danke Gernot

      Alternative 1
      <html>
      <head>
      <title>Test Formular</title>
      </head>
      <body>

      <form method="POST" name="Formular" action="cgi-bin/formtest.pl">
      <p>
      <select size="1" name="Liste1">
      <option onClick="document.Formular.Liste2.options[0].selected=true;">Auswahl1</option>
      <option onClick="document.Formular.Liste2.options[1].selected=true;">Auswahl2</option>
      <option onClick="document.Formular.Liste2.options[2].selected=true;">Auswahl3</option>
      </select>
      </p>

      <p>
      <select size="1" name="Liste2">
      <option>Auswahl1</option>
      <option>Auswahl2</option>
      <option>Auswahl3</option>
      </p>
      <p><input type="submit" value="Abschicken" name="Button1"><input type="reset" value="Zurücksetzen" name="Button2"></p>
      </form>
      </script>

      </body>
      </html>

      Altennative 2

      <html>
      <head>
      <title>Test Formular</title>
      </head>
      <body>
      <script language="JavaScript">
      function check()
      {

      for(i = 0; i < document.Testform.Auswahl.length; i++)
         if(document.Formular.Liste1.options[i].defaultSelected == true)
           document.Formular.Liste2.options[i].selected=true;
      }
      </script>

      <form method="POST" name="Formular" action="cgi-bin/formtest.pl">
      <p>
      <select size="1" name="Liste1" onClick="check()">

      <option>Auswahl1</option>
      <option>Auswahl2</option>
      <option>Auswahl3</option>
      </select>
      </p>

      <p>
      <select size="1" name="Liste2">
      <option>Auswahl1</option>
      <option>Auswahl2</option>
      <option>Auswahl3</option>
      </p>
      <p><input type="submit" value="Abschicken" name="Button1"><input type="reset" value="Zurücksetzen" name="Button2"></p>
      </form>
      </script>

      </body>
      </html>

  2. Hallo Gernot,

    So jetzt zum eigentlichen Problem:
    Ich möchte den Benutzer beim Ausfüllen des Formulares unterstützen. Das soll so laufen:
    Wenn er in einem Dropdownfeld einen Eintrag auswählt, soll in dem nachfolgenden Dropdownfeld(wenn es denn eins gibt) der selbe Eintrag vorbelegt werden.

    z.B User wählt in Liste2 die Auswahl3

    »»  -> Es wird geprüft: Gibt es eine Liste3, wenn ja Vorbelegung in Liste3=Auswahl3

    Interessante Frage :-), ich habe ein wenig gebastelt und bin auf folgende Lösung gekommen:

    <html>
    <head>
    <title>Test Formular</title>
    </head>
    <body>
    <script language="JavaScript">
    function check(a)
    {
       x=a.name.substring(5,a.name.length)*1+1;
       if (document.Formular["Liste"+x])
       document.Formular["Liste"+x].options[a.selectedIndex].selected=true;
    }
    </script>

    <form method="POST" name="Formular" action="cgi-bin/formtest.pl">
    <p>
    <select size="1" name="Liste1" onChange="check(this)">

    <option>Auswahl1</option>
    <option>Auswahl2</option>
    <option>Auswahl3</option>
    </select>
    </p>

    <p>
    <select size="1" name="Liste2" onChange="check(this)">
    <option>Auswahl1</option>
    <option>Auswahl2</option>
    <option>Auswahl3</option>
    </select>
    </p>
    <p><select size="1" name="Liste3" onChange="check(this)">
    <option>Auswahl1</option>
    <option>Auswahl2</option>
    <option>Auswahl3</option>
    </select></p>

    <p><input type="submit" value="Abschicken" name="Button1"><input type="reset" value="Zurücksetzen" name="Button2"></p>
    </form>
    </script>

    </body>
    </html>

    Das sollte problemlos funktionieren.

    Zum Funktionsprinzip:
    Beim Wechseln der Auswahl und nur dann! wird die Funktion check() aufgerufen. Diese erhält als Übergabeparameter die Liste selbst.

    In der Funktion schaut das Script nach, welche Liste es ist und holt sich die Nummer dieser Liste.
    Das macht konkret diese Zeile:

    x=a.name.substring(5,a.name.length)*1+1;
      
    Solltest du irgendwann mal statt Liste1,... z.B. Auswahl1 verwenden, dann mußt du statt der 5 die Buchstabenzahl reinschreiben und natürlich im nachfolgenden Teil Liste jeweils durch die Bezeichnung ersetzten.

    Anschließend prüft das Script, gibt eine nachfolgende Liste? Wenn ja, wird in der Liste die gewählte Option auf ausgewählt gesetzt.

    Das war es schon.

    Schönes Wochenende Allerseits

    Dir ebenfalls :-)

    Viele Grüße
    Antje

    PS: Dank WS64 heute auch mit Banner :-)

    <img src="http://pc-anfaenger.de/pca/sam/pcanfaenger.gif" alt="">

    1. Hallo Antje!
      Vielen Dank!!!!!!!
      Genau so kann ich gebrauchen!
      Schönes Wochenende!
      Gernot

      1. Hallo Antje!
        Vielen Dank!!!!!!!
        Genau so kann ich gebrauchen!
        Schönes Wochenende!
        Gernot

        schön - sobalds interessant wird, reden die Leute ausserhalb des Forums :-((

        1. Hallo!

          » schön - sobalds interessant wird, reden die Leute ausserhalb des »Forums :-((

          Damit niemand traurig ist:
          Antjes Vorschlag funktioniert auch mit grossen Datenmengen.
          Getestet mit 100 Dropdownfeldern und jeweils 1000 Optionen.

          Gruss Gernot :-)

    2. Hallo, Ich nochmal!
      Kann es sein, dass das Ganze mit grossen Datenmengen
      (ca. 60 Dropdownfelder mit jeweils 300 Einträgen)
      nicht klappt?
      Gruss Gernot

      1. Hallo Gernot,

        Kann es sein, dass das Ganze mit grossen Datenmengen
        (ca. 60 Dropdownfelder mit jeweils 300 Einträgen)
        nicht klappt?

        Theoretisch nein, praktisch könnte es sein. Am besten ist es, du stellst es mal online.

        Viele Grüße
        Antje

        1. Hallo

          Theoretisch nein, praktisch könnte es sein. Am besten ist es, du stellst es mal online.

          Komme jetzt nicht mehr an die Daten dran!
          Melde mich Montag per Mail, wenn ich das ganze online gestellt habe!
          Bis dann!

          Gernot