Berty: Verlinkung durch mehrere Auswahllisten

Hallo,
irgendwie häng ich am Ende fest. Folgendes: ich habe 4 Auswahllisten die voneinander abhängig sind.

d.h. Kategorie 1 wird gewählt somit ergibt sich nur noch ein kriterium für die 2. - wenn die 2. gewählt ergibt sich ein kriterium für die 3. - wenn die 3. gewählt ergibt sich ein kriterium für die 4.

Sind alle 4 Kriterien gewählt soll nun per Button-Click ein Video im Fenster abgespielt werden aber ich weiß nicht wie die function dazu aussieht?

  1. @@Berty:

    nuqneH

    irgendwie häng ich am Ende fest

    Am Ende? Wie sieht dein Anfang aus?

    aber ich weiß nicht wie die function dazu aussieht?

    Die Funktion des Forums ist in der Charta beschrieben. Interessant für dich sind die Tips für Fragende.

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@Berty:

      nuqneH

      irgendwie häng ich am Ende fest

      Am Ende? Wie sieht dein Anfang aus?

      aber ich weiß nicht wie die function dazu aussieht?

      Die Funktion des Forums ist in der Charta beschrieben. Interessant für dich sind die Tips für Fragende.

      naja der ganze quelltext passt hier nicht rein - aber gibt es eine Möglichkeit das du ihn sehen kannst und mir helfen könntest ?

      1. <script language="Javascript">

        function update_auswahl()
        {
            var kategorieAuswahl = document.forms.verzeichnis.kategorie;
            var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;

        unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren

        if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Kategorie 1")
            {
            unterkategorieAuswahl.options[0] = new Option("Block P2");
            unterkategorieAuswahl.options[1] = new Option("Block O2");
            unterkategorieAuswahl.options[2] = new Option("Block O3");
            }
                 else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Kategorie 2")
                  {
                  unterkategorieAuswahl.options[0] = new Option("Block B");
                  unterkategorieAuswahl.options[1] = new Option("Block C");
                  unterkategorieAuswahl.options[2] = new Option("Block D");
                  }

        }
        function update_auswahl2()
        {
               var kategorieAuswahl = document.forms.verzeichnis.kategorie;
               var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;
               var unterunterkategorieAuswahl = document.forms.verzeichnis.unterunterkategorie;

        unterunterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren

        if  (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Kategorie 1" &&
                      unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value =="Block P2")
                  {

        unterunterkategorieAuswahl.options[0] = new Option("Reihe 12");
                  }

        else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Kategorie 1" &&
                              unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value =="Block P2")
                          {
                 unterunterkategorieAuswahl.options[0] = new Option("Reihe 12");
                          }
        }
        function update_auswahl3()
        {
               var kategorieAuswahl = document.forms.verzeichnis.kategorie;
               var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;
               var unterunterkategorieAuswahl = document.forms.verzeichnis.unterunterkategorie;
               var unterunterunterkategorieAuswahl = document.forms.verzeichnis.unterunterunterkategorie;

        unterunterunterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren

        if  (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Kategorie 1" &&
                      unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value == "Block P2" &&
                      unterunterkategorieAuswahl.options[unterunterkategorieAuswahl.selectedIndex].value == "Reihe 12")
                  {

        unterunterunterkategorieAuswahl.options[0] = new Option("Platz 1");
                 unterunterunterkategorieAuswahl.options[1] = new Option("Platz 2");

        }

        else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Kategorie 1" &&
                              unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value == "Block P2" &&
                              unterunterkategorieAuswahl.options[unterunterkategorieAuswahl.selectedIndex].value == "Reihe 13")
                          {
                 unterunterunterkategorieAuswahl.options[0] = new Option("Platz 1");
                 unterunterunterkategorieAuswahl.options[1] = new Option("Platz 2");

        }
        }

        function setKategorie()
        {
            alert(document.getElementById("kategorie").value + document.getElementById("unterunterkategorie").value) ; // -> Liefer Wert
        }

        </script>

        </head>

        <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

        <form name="verzeichnis">

        <select size="1" name="kategorie" id="kategorie"  onclick="update_auswahl()">
            <option value="Kategorie 1">Kategorie 1</option>
            <option value="Kategorie 2">Kategorie 2</option>
            <option value="Kategorie 3">Kategorie 3</option>
            <option value="Kategorie 4">Kategorie 4</option>
            </select>

        <select size="1" name="unterkategorie" id="unterkategorie"  onclick="update_auswahl2()">
            <option value="Block P2">Block P2</option>
            <option value="Block O2">Block O2</option>
            <option value="Block O3">Block O3</option>
            </select>

        <select size="1" name="unterunterkategorie" id="unterunterkategorie" onclick="update_auswahl3()">
            <option value="Reihe 12">Reihe 12</option>
            <option value="Reihe 13">Reihe 13</option>
            </select>

        <select size="1" name="unterunterunterkategorie" id="unterunterunterkategorie" onchange="setKategorie()">
            <option value="Platz 1">Platz 1</option>
            <option value="Platz 2">Platz 2</option>
            </select>

        </form>

        </body>
        </html>

        1. Mahlzeit Berty,

          das Duplizieren von Code ist *NIEMALS*(!!!111einsELFELF) eine gute Idee (mit den bekannten Ausnahmen für "niemals").

          Anstatt also die Funktion "update_auswahl()" einfach munter für jede Verschachtelungstiefe zu kopieren solltest Du Dir lieber *eine* Funktion ausdenken, die dann aufgrund der separat gespeicherten Abhängigkeiten (z.B. in Form verschachtelter Arrays oder Objekte) der einzelnen Ebenen die Auswahllisten (neu) befüllt.

          <script language="Javascript">

          Zusätzlich fehlt hier das zwingend erforderliche "type"-Attribut.

          Prinzipiell sieht es aber so aus, als ob Du - wie Du ja auch schriebst - den Anfang einigermaßen gemeistert hast (zwar mit unschönen Krücken), nun aber am Ende hängst:

          function setKategorie()
          {
              alert(document.getElementById("kategorie").value + document.getElementById("unterunterkategorie").value) ; // -> Liefer Wert
          }

          Was genau ist hierbei Dein Problem? Es soll laut Deiner Beschreibung "nun per Button-Click ein Video im Fenster abgespielt werden" ... was genau bedeutet das? Was für ein Video? Inwiefern ist die getroffene Auswahl dafür relevant? Wovon hängt ab, welches Video abgespielt wird?

          Der gesamte übrige Code ist übrigens eher irrelevant und es ist IMHO eine ziemliche Zumutung für Deine Leser, diesen unkommentiert hier hineinzukopieren ...

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          1. Vielen Dank @EKKI

            was das duplizieren betrifft so Schande auf mein Haupt. Nur stecke ich im Moment in den Kinderschuhen was Programmierung betrifft. Da muss ich wohl noch viel nachlesen.

            Gibt es irgendwo schon so ein ähnliches Beispiel?

            Also per Klick auf den Button soll sich eine html seite öffnen welche das flv video beinhaltet und abspielt. Bestenfalls sogar im gleichen Fenster.

            Die function setKategorie ist nur ein Versuch um zu sehen was die jeweiligen befehle zurückgeben.

            1. Mahlzeit Berty,

              Also per Klick auf den Button soll sich eine html seite öffnen welche das flv video beinhaltet und abspielt.

              Was ist *das* flv-Video? Wodurch wird bestimmt, *welches* abgespielt werden soll? Durch die getroffene Auswahl? Wenn ja: inwiefern?

              Vielleicht solltest Du mal ein paar Beispiele bzw. Abhängigkeiten aufzeigen, damit Deine Leser verstehen, was bisher nur in einem Kopf vorgeht ...

              MfG,
              EKKi

              --
              sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
              1. Also ich meinte es so:

                <form name="doppelmenue" action="">

                <select name="auswahlliste" size="1" onChange="redirect(this.options.selectedIndex)">
                 <option>Home</option>
                 <option>Suchmaschinen</option>
                 <option>Sonstiges</option>
                </select>

                <select name="auswahlliste2" size="1">
                 <option value="startseite.htm">Homepage</option>
                 <option value="buch.htm">Gästebuch</option>
                 <option value="forum.htm">Forum</option>
                </select>

                <input type="button" name="test" value="Los" onClick="auswaehlen()">

                <script type="text/javascript">
                // Doppelte Menü-Auswahlliste
                var groups = document.doppelmenue.auswahlliste.options.length;
                var auswahl = new Array(groups);
                for (var zaehler = 0; zaehler < groups; zaehler++) {
                 auswahl[zaehler] = new Array();
                }

                auswahl[0][0] = new Option("Homepage", "startseite.htm");
                auswahl[0][1] = new Option("Gästebuch", "buch.htm");
                auswahl[0][2] = new Option("Forum", "forum.htm");

                auswahl[1][0] = new Option("Yahoo", "http://www.yahoo.de");
                auswahl[1][1] = new Option("Google", "http://www.google.de");
                auswahl[1][2] = new Option("Windows Live", "http://www.live.com");

                auswahl[2][0] = new Option("T-Online", "http://www.t-online.de");
                auswahl[2][1] = new Option("Arbeitsamt", "http://www.arbeitsamt.de");
                auswahl[2][2] = new Option("Homepage-Total", "http://www.homepage-total.de");
                auswahl[2][3] = new Option("Netzgemeinde", "http://www.netzgemein.de");

                var temp = document.doppelmenue.auswahlliste2;

                function redirect(x) {
                 for (var zaehler = temp.options.length-1; zaehler > 0; zaehler--) {
                  temp.options[zaehler] = null;
                 }
                 for (var zaehler = 0; zaehler < auswahl[x].length; zaehler++) {
                  temp.options[zaehler] = new Option(auswahl[x][zaehler].text,auswahl[x][zaehler].value);
                 }
                 temp.options[0].selected = true;
                }

                function auswaehlen() {
                 location.href = temp.options[temp.selectedIndex].value;
                }
                </script>

                </form>

                Wie wäre es jetzt, da noch eine 3. und 4. Auswahl hinzuzufügen?

                1. Mahlzeit Berty,

                  was hat der von Dir gepostete Code mit meinen Fragen zu tun?

                  MfG,
                  EKKi

                  --
                  sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          2. @@EKKi:

            nuqneH

            <script language="Javascript">
            Zusätzlich fehlt hier das zwingend erforderliche "type"-Attribut.

            Was nicht für HTML5 gilt.

            Andererseits ist das @language-Attribut in keiner (X)HTML(5)-Version sinnvoll und in einigen Varianten auch gar nicht erlaubt.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)