Ankündigung

Einklappen
Keine Ankündigung bisher.

4 voneinander abhängige Dropdownfelder

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 4 voneinander abhängige Dropdownfelder

    Hallo zusammen,

    ich hab wieder ein Problen und hoffe, jemand hat vielleicht einen Lösungsansatz.

    Es sollen 4 voneinander abhängige Dropdownfelder aus einer Datenbank gefüllt werden.

    Ich habe mich zum Thema Ajax eingelesen und versucht, das darüber zu realisieren, funktioniert jedoch nur teilweise.

    Ich nutze über onchange eine Ajax Funktion, die den Wert des Dropdownfeldes an ein php file per POST übergibt, wo die die Datenbankabfrage erfolgt und die ausgelesenen Daten über Arrays in einem XML File an eine andere Ajax Funktion übergeben werden, wo sie per ID zugewiesen werden, was soweit auch funktioniert.

    Das Problem ist nur, dass ich beim zweiten Feld nur den Wert des 2. Feldes per onchange übergeben kann, aber auch den Wert vom ersten Auswahlfeld bzw. aller vorhergehenden Felder brauche.

    Für Lösungsideen dafür wäre ich sehr dankbar.

    mfg

    oaschbagasch

  • #2
    Vielleicht gibt's ja ein musikalisches Talent hier im Board das "Möpse" auf "Code" umdichten kann, fällt mir in letzter Zeit häufiger auf... - https://www.youtube.com/watch?v=j3g5e3vvw7U

    Ganz ehrlich, zeig mal Code. Wie machst du die Ajax-Requests? Warum kannst du nicht mehr Werte schicken, etc. etc.

    Kommentar


    • #3
      Sorry, hier etwas Code:

      So rufe ich die Ajax Funktion auf:

      PHP-Code:
      echo "<td><select class=\"auswahl\" name=\"art\" onchange=\"anfordern(this.value)\">"
      Ich suche praktisch nach etwas, mit dem ich zusätzlich zu dem Wert dieses Feldes (this.value) den Wert des vorhergehenden Feldes übergeben kann.
      Zum Beispiel könnte ich versteckte Felder füllen, kann ich dann diese Werte irgendwie per onchange mit übergeben?

      Die Funktion anfordern sieht so aus:

      PHP-Code:
      <script language=JavaScript>
              var 
      rq;
              function 
      anfordern(typeid)
              {
                  
      rq = new XMLHttpRequest();
                  
      rq.open("post""type_category1.php"true);
                  
      rq.setRequestHeader("Content-Type""application/x-www-form-urlencoded");
                  
      rq.send("id=" typeid);
                  
      rq.onreadystatechange auswerten;
              } 
      Das zugehörige PHP File:

      PHP-Code:
      <?php
          header
      ("Content-Type: text/xml; charset=utf-8");
          
      $id $_POST["id"];
          
      $db mysqli_connect("localhost","root","","cspdb") ;
          if(!
      $db)
          {
              exit(
      "Fehler beim Verbinden: ".mysqli_connect_error());
          }
          
      mysqli_set_charset($db'utf8');
          
      $qry "SELECT Type_Category_1.Type_ID, Category_1.Category_1_ID, Name FROM type_category_1 LEFT JOIN Category_1 ON Type_Category_1.Category_1_ID = Category_1.Category_1_ID WHERE Type_Category_1.Type_ID = '" $id "' ORDER BY OrderNumber ASC";
          
      $result mysqli_query($db$qry);
          
      $num mysqli_num_rows($result);
          
      $type = array();
          
      $category1 = array();
          
      $name = array();
          
      $i 0;
          while(
      $dsatz mysqli_fetch_assoc($result))
          {
              
      $type[$i] = $dsatz["Type_ID"];
              
      $category1[$i] = $dsatz["Category_1_ID"];
              
      $name[$i] = $dsatz["Name"];
              
      $i ++;
          }  
          echo 
      "<?xml version='1.0' encoding='utf-8'?>\n";
          echo 
      "<kategorien>\n";
          for(
      $i=0$i<$num$i++)
          {
              echo 
      "<type".$i.">".$type[$i]."</type".$i.">\n";
              echo 
      "<cata".$i.">".$category1[$i]."</cata".$i.">\n";
              echo 
      "<nam".$i.">".$name[$i]."</nam".$i.">\n";
          }
          echo 
      "</kategorien>\n";
          
      mysqli_close($db);
      ?>
      Und die Ajax Funktion, die das XML File auswertet:

      PHP-Code:
      unction auswerten()
              {
                  if(
      rq.readyState == && rq.status == 200)
                  {
                      var 
      antwort rq.responseXML;
                      
      document.getElementById("1kat1").value=antwort.getElementsByTagName("cata0")[0].firstChild.nodeValue;
                      
      document.getElementById("1kat1").innerHTML=antwort.getElementsByTagName("nam0")[0].firstChild.nodeValue;
                      
      document.getElementById("1kat2").value=antwort.getElementsByTagName("cata1")[0].firstChild.nodeValue;
                      
      document.getElementById("1kat2").innerHTML=antwort.getElementsByTagName("nam1")[0].firstChild.nodeValue;
                      
      document.getElementById("1kat0").innerHTML="Bitte wählen";
                  }
              } 

      Kommentar


      • #4
        Der AJAX Request sollte alle 4 Parameter senden (null, wenn ein SELECT noch nicht ausgewählt werden konnte).
        Oder du packst alles in eine FORM und sendest diese.
        Die Antwort enthält dann 4 Arrays, jeweils passend zu den SELECTs. Befüllen der SELECTs wieder per Javascript (ids der SELECTs müssten bekannt sein).
        Du kannst auch anstatt JSON gleich fertiges HTML schicken, ist zwar nicht ganz so elegant, aber dennoch legitim.

        Und lach dir eine JS Bibliothek an, die die AJAX Aufrufe für dich erledigt, x-browser fähig.
        Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

        Kommentar


        • #5
          Kann ich denn nicht einfach per onchange die Values von anderen Auswahlfeldern mitsenden, sowas wie

          PHP-Code:
          onchange=\"anfordern1(this.value, document.getElementById(\"type\").value) 
          Ansonsten, wenn ich die 4 Auswahlfelder in eine FORM packe und absende, wie könnte ich sie dann in der Funktion anfodern auslesen?
          Und gibt es kein Problem, wenn am Anfang von den 4 Auswahlfeldern nur eines gefüllt ist beim Absenden?

          Kommentar


          • #6
            Übergib der anfordern()-Funktion einfach keine Parameter, sondern hol dir direkt in der Funktion die Werte?

            Kommentar


            • #7
              Und gibt es kein Problem, wenn am Anfang von den 4 Auswahlfeldern nur eines gefüllt ist beim Absenden?
              Was du per AJAX sendest, musst du auf PHP Seite natürlich bedenken und abfangen. Du musst ja wissen, mit welchen Informationen du welches SQL ausführen musst, um die Daten für die nächste Box zu ermitteln. Schickst du nur den ersten Parameter, wird Box 2 befüllt, bei 2 Parameter ist es Box 3 usw.

              Bedenke auch: Wenn der User in Select 2 die Auswahl ändert, müssen 3 und 4 neu befüllt werden (immer alle Daten zu schicken kann also auch falsch sein, es steckt schon eine gewisse Logik dahinter, die du auch so programmieren musst)
              Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

              Kommentar


              • #8
                Zitat von Tropi Beitrag anzeigen
                Übergib der anfordern()-Funktion einfach keine Parameter, sondern hol dir direkt in der Funktion die Werte?
                Vielen Dank, genau so etwas hab ich gesucht.

                So funktioniert es.

                Ich hätte nur noch eine Frage:

                Bei den 4 Auswahlfeldern habe ich jeweils versteckte , vorerst leere Optionsmöglichkeiten erstellt (über hidden attribut), in der auswertenden Funktion werden sie je nach Anzahl der gelieferten Datensätze befüllt und das "hidden" Attribut entfernt, damit sie sichtbar werden.

                Im Firefox funktioniert es einwandfrei, im IE funktioniert das Verstecken jedoch nicht.

                Hier mal der Code:

                PHP-Code:
                echo "<table id=\"linksunten\">";                        
                                        echo 
                "<tr>";
                                        echo 
                "<td>Art des Incidents:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>";
                                        echo 
                "<td><select id=\"typ\" class=\"auswahl\" name=\"art\" onchange=\"anfordern()\">";
                                        echo 
                "<option>Bitte wählen</option>";
                                        echo 
                "<option value=\"" .$type[0] ."\">".$name[0] ."</option>";
                                        echo 
                "<option value=\"" .$type[1] ."\">".$name[1] ."</option>";
                                        echo 
                "</select></td>";
                                        echo 
                "</tr><tr>";
                                        echo 
                "<td>1. Kategorie:</td>";
                                        echo 
                "<td><select  id=\"1cat\"class=\"auswahl\" name=\"kat1\" onchange=\"anfordern1()\">";
                                        echo 
                "<option id=\"1kat0\"></option>";
                                        echo 
                "<option id=\"1kat1\"></option>";
                                        echo 
                "<option id=\"1kat2\"></option>";
                                        echo 
                "</select></td>";
                                        echo 
                "</tr><tr>";
                                        echo 
                "<td>2. Kategorie:</td>";
                                        echo 
                "<td><select  id=\"2cat\" class=\"auswahl\" name=\"kat2\" onchange=\"anfordern2()\">";
                                        echo 
                "<option id=\"2kat0\"></option>";
                                        echo 
                "<option id=\"2kat1\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"2kat2\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"2kat3\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"2kat4\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"2kat5\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"2kat6\" hidden=\"true\"></option>";
                                        echo 
                "</select></td>";
                                        echo 
                "</tr><tr>";
                                        echo 
                "<td>Vorlage:</td>";
                                        echo 
                "<td><select  id=\"vorl\"class=\"auswahl\" name=\"vorlage\" onchange=\"anfordern3()\">";
                                        echo 
                "<option id=\"3kat0\" value=\"xx\"></option>";
                                        echo 
                "<option id=\"3kat1\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"3kat2\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"3kat3\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"3kat4\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"3kat5\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"3kat6\" hidden=\"true\"></option>";
                                        echo 
                "<option id=\"3kat7\" value=\"xy\">Sonstiges</option>";
                                        echo 
                "</select></td>";
                                        echo 
                "</tr>";                        
                                    echo 
                "</table>"

                Die auswertende Funktion:

                PHP-Code:
                function auswerten2()
                        {
                            if(
                rq.readyState == && rq.status == 200)
                            {
                                var 
                antwort rq.responseXML;
                                var 
                anzahl antwort.getElementsByTagName("num")[0].firstChild.nodeValue;
                                switch (
                anzahl)
                                {
                                    case 
                "1":     document.getElementById("3kat1").hidden =false;
                                                break;
                                    case 
                "2":     document.getElementById("3kat1").hidden =false;
                                                    
                document.getElementById("3kat2").hidden =false;
                                                break; 
                                    case 
                "3":     document.getElementById("3kat1").hidden =false;
                                                    
                document.getElementById("3kat2").hidden =false;
                                                    
                document.getElementById("3kat3").hidden =false;
                                                break;
                                    case 
                "4":     document.getElementById("3kat1").hidden =false;
                                                    
                document.getElementById("3kat2").hidden =false;
                                                    
                document.getElementById("3kat3").hidden =false;
                                                    
                document.getElementById("3kat4").hidden =false;
                                                break;
                                    case 
                "5":     document.getElementById("3kat1").hidden =false;
                                                    
                document.getElementById("3kat2").hidden =false;
                                                    
                document.getElementById("3kat3").hidden =false;
                                                    
                document.getElementById("3kat4").hidden =false;
                                                    
                document.getElementById("3kat5").hidden =false;
                                                break;
                                    case 
                "6":     document.getElementById("3kat1").hidden =false;
                                                    
                document.getElementById("3kat2").hidden =false;
                                                    
                document.getElementById("3kat3").hidden =false;
                                                    
                document.getElementById("3kat4").hidden =false;
                                                    
                document.getElementById("3kat5").hidden =false;
                                                    
                document.getElementById("3kat6").hidden =false;
                                                break;                
                                }
                                
                document.getElementById("3kat0").innerHTML="Bitte wählen";
                                
                document.getElementById("3kat1").value=antwort.getElementsByTagName("temp0")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat1").innerHTML=antwort.getElementsByTagName("nam0")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat2").value=antwort.getElementsByTagName("temp1")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat2").innerHTML=antwort.getElementsByTagName("nam1")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat3").value=antwort.getElementsByTagName("temp2")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat3").innerHTML=antwort.getElementsByTagName("nam2")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat4").value=antwort.getElementsByTagName("temp3")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat4").innerHTML=antwort.getElementsByTagName("nam3")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat5").value=antwort.getElementsByTagName("temp4")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat5").innerHTML=antwort.getElementsByTagName("nam4")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat6").value=antwort.getElementsByTagName("temp5")[0].firstChild.nodeValue;
                                
                document.getElementById("3kat6").innerHTML=antwort.getElementsByTagName("nam5")[0].firstChild.nodeValue;
                            }
                        } 
                Jemand ne Idee, warum das Verstecken bein IE nicht funktioniert?

                Kommentar


                • #9
                  Im Firefox funktioniert es einwandfrei, im IE funktioniert das Verstecken jedoch nicht.
                  Schau Dir mal diesen Link an. Da findest Du Dein Problem fast wortgleich beschrieben.
                  http://bytes.com/topic/javascript/an...options-select
                  [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                  Kommentar


                  • #10
                    Ja, scheint nicht ganz trivial zu sein.

                    Ich bin jetzt dazu übergegangen, die Optionen nicht zu erstellen und zu verstecken, sondern will sie in der Javascript Funktion erst erstellen.

                    Funktioniert auch zum Teil.

                    Ich will abhängig von der Anzahl der gelieferten Datensätze die neuen Optionen erstellen, dazu nutze ich eine for Schleife.

                    PHP-Code:
                    for(var 0i<anzahli++)
                                    {
                                        
                    NeuerEintrag = new Option(antwort.getElementsByTagName("nam1")[0].firstChild.nodeValueantwort.getElementsByTagName("temp1")[0].firstChild.nodeValue);
                                        
                    document.formular.vorlage.options[document.formular.vorlage.length] = NeuerEintrag;
                                    } 
                    Problem dabei ist, ich möchte bei jedem Schleifendurchlauf einen neuen tag ansprechen, beim ersten "nam0" und "temp0", beim zweiten "nam1" und "temp1" usw.

                    Ich bekomme jedoch die Laufvariable "i" nicht so eingefügt, dass es funktioniert, gesucht wär sowas wie

                    PHP-Code:
                    for(var 0i<anzahli++)
                                    {
                                        
                    NeuerEintrag = new Option(antwort.getElementsByTagName("nam"i)[0].firstChild.nodeValueantwort.getElementsByTagName("temp"i)[0].firstChild.nodeValue);
                                        
                    document.formular.vorlage.options[document.formular.vorlage.length] = NeuerEintrag;
                                    } 
                    Das funktioniert jedoch nicht. Kann jemand helfen?

                    Lg

                    oaschbagasch

                    Kommentar


                    • #11
                      Hallöchen,

                      holy shit. Dropdowns.

                      Viele Grüße,
                      lotti
                      [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                      Kommentar


                      • #12
                        Danke, aber damit kann ich leider recht wenig anfangen

                        Ich könnts natürlich per switch/case wieder realisieren, aber mit ner for-Schleife wärs doch wesentlich eleganter und zudem viel weniger Schreibarbeit, wenns denn funktionieren würde

                        Lg

                        oaschbagasch

                        Kommentar


                        • #13
                          Edit:

                          Habs hinbekommen, so funktionierts

                          PHP-Code:
                          for(var 0i<anzahli++)
                                          {
                                              
                          NeuerEintrag = new Option(antwort.getElementsByTagName("nam"+i)[0].firstChild.nodeValueantwort.getElementsByTagName("temp"+i)[0].firstChild.nodeValue);
                                              
                          document.formular.vorlage.options[document.formular.vorlage.length] = NeuerEintrag;
                                          } 

                          Kommentar

                          Lädt...
                          X