Ankündigung

Einklappen
Keine Ankündigung bisher.

HTML/JavaScript: Verschachtelte Auswahlfelder

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • HTML/JavaScript: Verschachtelte Auswahlfelder

    Hallo,
    lange Rede kurzer Sinn, habe eben in einen anderen Forum diesen Code-Schnipsel gepostet, der kann eigentlich auch gleich hier ins Tutorial, weil die Frage so oft vorkommt.

    Und zwar:
    Wie mache ich das, dass eine <select> Auswahl eine weitere <select> Auswahl anzeigt, deren Daten direkt von der Auswahl abhängen.

    Code:
    <html>
    <head>
        <title></title>
        
        <script type="text/javascript">
            var mygroup = new Array();
            
            // reset
            mygroup[0] = new Array();
            mygroup[0][0] = new Option("Bitte wählen Sie zunächst eine Sprache.", 0);
            
            // deutsch
            mygroup[1] = new Array();
            mygroup[1][0] = new Option("eins", 2);
            mygroup[1][1] = new Option("zwei", 4);
            mygroup[1][2] = new Option("drei", 8);
            
            // englisch
            mygroup[2] = new Array();
            mygroup[2][0] = new Option("one",   1);
            mygroup[2][1] = new Option("two",   3);
            mygroup[2][2] = new Option("three", 9);
            
            // spanisch kann ich nicht
            
            // französisch (eigentlich auch nicht)
            mygroup[40] = new Array();
            mygroup[40][0] = new Option("un",    5);
            mygroup[40][1] = new Option("deux",  50);
            mygroup[40][2] = new Option("trois", 500);
            
            // mygroup[ZB_PRIMARY_KEY_SELECT][FORTLAUFENDE_ZAHLEN_AB_0] = new Option(OPTION_TEXT, ZB_PRIMARY_KEY_SUBSELECT)
            
            // alle <option>s des sub-<select> entfernen
            function ResetSubSelect(form, subSelect)
            {
                var e = form.elements[subSelect];
                for (var i = 0; i < e.options.length; ++i) {
                    e.options[i] = null;
                }
            }
            
            // übergebenes Element (sub-<select>) deaktivieren
            function DisableSubSelect(elem)
            {
                elem.disabled = 1;
            }
            
            // übergebenes Element (sub-<select>) aktivieren
            function EnableSubSelect(elem)
            {
                elem.disabled = 0;
            }
            
            // tritt bei onchange in Kraft, bzw. bei der Initiierung
            function ShowSubSelect(elem, subSelect)
            {
                // alle <option>s des sub-<select> entfernen (reset)
                ResetSubSelect(elem.form, subSelect);
                
                // welcher value wurde ausgewählt
                var i = elem.options[elem.selectedIndex].value;
                // sub-<select>
                var s = elem.form.elements[subSelect];
                
                // dem <sub>-select die <option>s aus mygroup zuordnen
                for (var k = 0; k < mygroup[i].length; k++) {
                    s.options[k] = mygroup[i][k];
                }
                
                // war die ausgewählte value 0? dann sub-<select> deaktivieren
                if (i == 0) {
                    DisableSubSelect(s);
                } else {
                    EnableSubSelect(s);
                }
            }
            
            function InitSubSelect()
            {
                // leeres sub-<select> mit mygroup[0] füllen
                ShowSubSelect(document.forms["myform"].elements["myselect"], "mysubselect");
            }
        </script>
    </head>
    <body onload="InitSubSelect()">
    
    <form action="" method="get" name="myform">
        <select name="myselect" onchange="ShowSubSelect(this,'mysubselect')">
            <option value="0">Bitte wählen Sie eine Sprache.</option>
            <option value="1">deutsch</option>
            <option value="2">englisch</option>
            <option disabled="disabled" value="3">spanisch</option>
            <option value="40">französisch</option>
        </select>
        
        <select name="mysubselect" disabled="disabled">
        </select>
        
        <input type="submit" />
    </form>
    
    </body>
    </html>
    Ich behaupte einfach mal, der Code ist größtenteils selbsterklärend, zumindest ist er auch für den Laien erweiterbar.

    Einfach den JavaScript-Array mygroup mit einer PHP-Schleife generieren.

    Die 1. Dimension von mygroup steht für den Primärschlüssel der 1. Auswahl. Er muss nicht fortlaufend sein.

    Die 2. Dimension von mygroup ist eine fortlaufenden Zahl, beginnend mit 0 (also einfach den PHP-Schleifen-Zähler reinbraten).

    new Option(text, value)
    text steht hierbei für den sichtbaren Text im sub-<select>, value könnte der Primärschlüssel einer verlinkten Tabelle des Haupt-<select> sein (er muss auch nicht fortlaufend sein).

    Einfach auf submit klicken und testen, was für Werte bei welcher Auswahl ankommen. Bei Fragen, bitte direkt posten, damit ich Unklarheiten auch im Skript ausräumen kann.


    Edit: Bitte auch diese Neufassung einer verschachtelten Auswahl beachten:
    http://www.php.de/tutorials/43433-ht...tml#post468567


  • #2
    Zumindest im IE funktioniert das disabled auf option nicht, deswegen hagelts ob der fehlenden spanischen Arraydefinition ne JS Fehlermeldung. Dabei wiederum wird deutlich, dass beim Löschen der Einträge ein Fehler auftritt. Der zweite Eintrag bleibt stehen.
    Ich denke, das liegt daran, dass sich beim NULL setzen der Eigenschaft option automatisch der Wert für options.length ändert und so den Schleifendurchlauf beeinflusst. Abhilfe schafft die Ersetzung durch folgendes Fragment:
    Code:
                var l = e.options.length;
                for (var i = 0; i < l; i++) {
                  e.options[0] = null;
                  }
    Im Normalfall funktioniert das Löschen der Select-Einträge auch über
    Code:
    e.options.length = 0;
    , also das Setzen der Anzahl der Einträge. Allerdings gibt zumindest Selfhtml die length Eigenschaft als nur Lesen an.
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      Danke für den Hinweis, ich bau es die nächsten Tage um.

      Kommentar


      • #4
        Du solltest dir auch noch was überlegen bezüglich voreingestellten Werten und behalten des eingestellten subselect-wertes. Sowohl der IE7 als auch der FF3 kommen bei deinem Beispiel damit durcheinander, auch wenn ich noch keinen nachvollziehbaren Grund dafür gefunden habe...

        Beispiel:
        - Seite mit deinem Script frisch geladen
        - man klick auf "Deutsch" => Subwert ist automatisch "eins"
        - man klick auf "Englisch" => Subwert ist automatisch "one"
        - man klick nochmal auf "Deutsch" => Subwert ist automatisch "zwei"
        - man klick nochmal auf "Englisch" => Subwert ist automatisch "two"


        Ich habe also den mysubselect nie berührt und trotzdem haben sich die Werte geändert

        Kommentar


        • #5
          Vielleicht hängt das mit der Sache zusammen, die ich als Anmerkung gepostet habe? Existiert evl. gar keine 1. Eintrag?
          --

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar


          • #6
            Kann man auch 3 mal die Selbe Abfrage stellen unter anderen select names mit den selben auswahlen??

            Kommentar


            • #7
              Na klar.
              --

              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


              --

              Kommentar


              • #8
                @ nikosch kannst du mir vieliecht auch einen kleinen tipp geben wie?? weil wenn ich es versuche dann zeigt mir <select name="mysubselect" disabled="disabled">
                </select>
                nichts mehr an

                Kommentar


                • #9
                  Beschreib mal noch mal die Problemstellung
                  --

                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                  --

                  Kommentar


                  • #10
                    habe es dir mla hochgeladen wie es sein sollte, nur das die 2 Auswahl halt weiter unten sein soll Bestellformular Online 1. und so sieht es bei mir immer wieder aus: Bestellformular Online 2

                    Kommentar


                    • #11
                      Verstehe schon das Prinzip im 1. Beispiel nicht. Aber ansonsten hindert Dich doch keiner dran, den Quellcoide aus 1/ zu inspizieren/kopieren.
                      --

                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                      --

                      Kommentar


                      • #12
                        Zitat von nikosch Beitrag anzeigen
                        Verstehe schon das Prinzip im 1. Beispiel nicht. Aber ansonsten hindert Dich doch keiner dran, den Quellcoide aus 1/ zu inspizieren/kopieren.
                        natürlich hindert mich nichts daran nur versuch mal im ersten eine galerie auszuwählen, das funktioniert aber im zweiten wenn ich da eine auswähle geschieht nichts!!!!

                        Kommentar


                        • #13
                          Benutz die JS Konsole!

                          e is undefined
                          [Break on this error] for (var i = 0; i < e.options.length; ++i) {
                          --

                          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                          --

                          Kommentar


                          • #14
                            Super aber hab noch ein Problem

                            Hallo!
                            Ich hatte am Anfang ein Formular mit 2 PHP-Dropdown-Menüs, das eine mit Quellsprachen, das andere mit Zielsprachen. Jedes Menüs war bisher unabhängig voneinander, wobei bestimmte Kombinationen, wie z.B. Japanisch -> Suaheli nicht zugelassen war, aber ich konnte es nicht programmieren.
                            Mit diesem Script kann ich bei der Auswahl von Japanisch Quellsprache dafür sorgen, dass Suaheli als Zielsprache nicht erscheint. Echt toll!
                            Nur, ich hatte in den Menüs unter Option Value jeweils die Sprachenbezeichnungen stehen, weil ich diese Values per POST-method brauchte, um dann einen Satz wie "Die Sprachkombination zwischen Englisch und Französisch bla bla bla..." anzuzeigen. In diesem Script sind die Values aber Zahlen, die man hinter mygroup[]-Klasse wiederfindet. Ändere ich diese Zahlen und mache daraus Sprachen, funktioniert das Programm nicht mehr. Wie kann ich es bei so einem Script machen, dass ich die ausgewählten Sprachen am Ende in den Satz als Variable wieder finden kann?
                            Hätte da jemand ein Tipp?

                            Vielen Dank im Voraus, dass es Leute wie euch gibt. Schönen Samstag Abend!
                            cranien

                            Kommentar


                            • #15
                              Hallo,

                              ich habe dein Posting leider erst jetzt gesehen. Das Skript war damals von mir, ich wuerde es allerdings jetzt nicht mehr so machen. AJAX bietet da doch einfach etwas mehr.

                              Falls das Problem noch akut ist, melde dich einfach noch mal und wir loesen das.

                              Gruss, c
                              "Mein Name ist Lohse, ich kaufe hier ein."

                              Kommentar

                              Lädt...
                              X