Ankündigung

Einklappen
Keine Ankündigung bisher.

Mehrere Selects abhängig voneinander

Einklappen

Neue Werbung 2019

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

  • Mehrere Selects abhängig voneinander

    Hallo zusammen,
    Ein Formular, welches aus mehreren Select-Elementen besteht, soll dynamisch bestückt werden.
    Die Werte des ersten Selects habe ich vorgegeben, die weiteren sollen aus einer Datenbank geladen werden, abhängig von der vorherigen Auswahl.
    Hier ein paar Beispiele:
    • Fall 1:
      • Select 1: Mann
      • Select 2:
        • Option 1: Peter
        • Option 2: Paul
    • Fall 2:
      • Select 1: Frau
      • Select 2:
        • Option 1: Franziska
        • Option 2: Christina


    Der Bereich mit Ajax funktioniert gut, das Return liefert ein json-objekt.

    Hier mein Ansatz für das JS:
    Code:
    $( ".typsel" ).bind("change", function() {
                $( ".typsel [value='']" ).remove();
                var data = {
                    'action': 'fhw_ladeMarke',
                    'typ': this.value
                };
    
                jQuery.post(ajax_object.ajax_url, data, function(response) {
                    $(".typanzeige").html(response);
                });
                $sel = $( ".markesel" );
                $sel.append( "<option>"+value+"</option>" );
    
        });
    
        $( ".markesel" ).bind("click", function() {
    
            var text = $(".typanzeige").text();
            if(text != "") {
                $sel = $( ".markesel" );
                $.each( text, function( index, value ) {
                    $sel.append ( "<option value='"+value+"'>"+value+"</option>" );
                });
            }
        });

  • #2
    Unsere Glaskugel verrät uns halt nicht, was du als response zurückbekommst. Wahrscheinlich liegt da der Hund begraben. Gib dem nächsten Select eine Id und sprich diesen damit an. Wenn du json-Daten zurückbekommst kannst du den Select auch mit .append füllen.

    Kommentar


    • #3
      Zitat von jonas3344 Beitrag anzeigen
      Unsere Glaskugel verrät uns halt nicht, was du als response zurückbekommst. Wahrscheinlich liegt da der Hund begraben. Gib dem nächsten Select eine Id und sprich diesen damit an. Wenn du json-Daten zurückbekommst kannst du den Select auch mit .append füllen.
      Jo, es kommen json-daten zurück. Folgendes hab ich schon versucht für die nächste Select:
      Code:
      $( ".markesel" ).bind("click", function() {
              var text = $(".typanzeige").text();
              if(text != "") {
                  $sel = $( ".markesel" );
                  $.each( text, function( index, value ) {
                      $sel.append ( "<option value='"+value+"'>"+value+"</option>" );
                  });
              }
          });
      Allerdings wird wie schon gesagt immer erst beim zweiten mal auf die select klicken das angezeigt.

      Kommentar


      • #4
        Select kann glaub ich nur "change", nicht "click".

        Kommentar


        • #5
          Zitat von jonas3344 Beitrag anzeigen
          Select kann glaub ich nur "change", nicht "click".
          Naja, er führt den Code ja aus! Aber er soll die ja am besten von alleine da rein laden, ohne dass man darauf klickt. Demnach müsste ich das in die zuerst genannte funktion schreiben, aber da bezieht er die json aus irgend einem Grund nicht.

          Kommentar


          • #6
            Wenn du wirklich Hilfe willst solltest du dein komplettes Markup und den kompletten js-Code posten und genau beschreiben was du eigentlich willst. Mit dem Bruchstücken hier kann keiner etwas anfangen.

            Kommentar


            • #7
              Zitat von jonas3344 Beitrag anzeigen
              Wenn du wirklich Hilfe willst solltest du dein komplettes Markup und den kompletten js-Code posten und genau beschreiben was du eigentlich willst. Mit dem Bruchstücken hier kann keiner etwas anfangen.
              Stimmt wohl. Hab mal den Thread oben überarbeitet, hoffe das ist klar verständlicher.

              Kommentar


              • #8
                Jein, zeig doch konkret deine Selects, Nicht irgendwelche Pseudo-Elemente. Ausserdem ein Beispiel deiner json-Antwort.

                Und schon mal im vorab. Wenn du konkret einen Select ansprechen willst tu dies doch via id, nicht via Klasse.

                Kommentar


                • #9
                  Zitat von JohnHSmith Beitrag anzeigen

                  Stimmt wohl. Hab mal den Thread oben überarbeitet, hoffe das ist klar verständlicher.
                  Das du damit den kompletten Thread "vernudelst" ist dir klar? Warum nicht einfach das alles in einem neuen Beitrag (Antwort) reinklatschen. Wenn man den Thread jetzt von oben weg liest, ist das schwierig nachzuvollziehen auf was sich die Antowrten beziehen, weil du das einfach überschrieben hast. Mach das künftig bitte nicht mehr. Danke!
                  The string "()()" is not palindrom but the String "())(" is.

                  Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                  PHP.de Wissenssammlung | Kein Support per PN

                  Kommentar


                  • #10
                    Zitat von jonas3344 Beitrag anzeigen
                    Jein, zeig doch konkret deine Selects, Nicht irgendwelche Pseudo-Elemente. Ausserdem ein Beispiel deiner json-Antwort.

                    Und schon mal im vorab. Wenn du konkret einen Select ansprechen willst tu dies doch via id, nicht via Klasse.
                    Momentan ist das hier alles was ich habe, da die optionen ja eben dynamisch geladen werden sollen:
                    HTML-Code:
                    <label for="kfztyp">Fahrzeugtyp</label>
                            <select name="kfztyp" class="typsel">
                                <option value="">Bitte Fahrzeugtyp wählen</option>
                                <option value="pkw">PKW</option>
                                <option value="lkw">LKW</option>
                                <option value="traktor">AGRAR</option>
                            </select>
                            <div class="typanzeige" style="display: none"></div>
                    
                    
                            <label for="kfzmarke">Marke</label>
                            <select name="kfzmarke" class="markesel">
                                <option value="">Bitte erst Typ wählen</option>
                            </select>
                    Und ich rufe via class auf, da möglicherweise dieses "Formular" an mehreren Punkten der Seite eingebunden werden soll.

                    Kommentar


                    • #11
                      Und jetzt noch die json?

                      Grundsätzlich:

                      1. Change event auf dem ersten Select
                      2. Ajax-Request abschicken
                      3. Antwort parsen
                      4. 2.Select leeren und mit append wieder befüllen.

                      Weshalb du einen Klick auf dem 2.Select abfangen willst verstehe ich nicht wirklich.

                      Kommentar


                      • #12
                        Eine mögliche json wäre folgende:
                        ["Cummins","DAF","Detroit Diesel","Dodge","Freightliner","IVECO","Mack","MAN ","Mercedes Benz","Renault","Scania","Volvo"]
                        Ich hab es nur mal testweise mit dem klick abgefangen, weil es direkt nach dem $(".typanzeige").html(response) nicht funktioniert hat, warum auch immer.

                        Kommentar


                        • #13
                          Du übergibst html einen JSON-Array, das kann nicht funktionieren. Entweder steht in der Response schon der html-Markup drin oder du kreierst dir deine Options im Javascript indem du mit $.each durch den Array gehst.

                          Kommentar


                          • #14
                            Zitat von jonas3344 Beitrag anzeigen
                            Du übergibst html einen JSON-Array, das kann nicht funktionieren. Entweder steht in der Response schon der html-Markup drin oder du kreierst dir deine Options im Javascript indem du mit $.each durch den Array gehst.
                            Hey super... irgendwie hab ich einen Denkfehler gehabt, ich war der Meinung, dass ich response nicht weiter verwenden kann. Klappt jetzt!
                            Danke für die Hilfe!

                            Kommentar


                            • #15
                              Poste doch dein (funktionierendes) Javascript-Schnipsel noch, damit auch andere was davon haben.

                              Kommentar

                              Lädt...
                              X