Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] select onchange function in innerhtml - wie möglich?

Einklappen

Neue Werbung 2019

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

  • [Erledigt] select onchange function in innerhtml - wie möglich?

    hallo zusammen ,

    ich suche eine lösung für folgendes problem:

    ich versuche einen rechner nur per javascript zu erstellen, bisher klappte auch alles aber bei der zweiten selectbox, welche abhängig ist von der ersten selectbox ist, funktioniert gar nichts. sie wirft keinen wert aus. ich weiß, dass es schwierig ist eine function in innerhtml auszugeben aber es ist nicht unmöglich. allerdings enden hier meine fähigkeiten als anfängerin (beschäftige mich seit 3 wochen mit javascript). es wäre super, wenn mir jemand weiterhelfen könnte, sitze seit tagen mit diesem problem fest ...



    hier der codeschnipsel:


    Code:
    <script type ="text/javascript">
    function ad_row(){
               var table_id = "t1";
               var table = document.getElementById( table_id );
               var rows = table.getElementsByTagName( "tr" ).length;
               var tr = table.insertRow( rows );
               var td2 = document.createElement( "td" );
               var td3 = document.createElement( "td" );	   
    		   td2.innerHTML = '<td><select class="grup2" id="gruppe2" name="gruppe2" onchange="populate(this.id, "lebensm2")"><option value=""></option><option value="Obst"> Obst </option><option value="Gemüse"> Gemüse </option><option value="Fleisch"> Fleisch </option></select></td>'
    		   td3.innerHTML = '<td><select class="lebensmittel2" id="lebensm2" name="lebensm2" ></select></td>';
    		   tr.appendChild( td2 );
               tr.appendChild( td3 );
            };		   
    </script>
    		
    <script type ="text/javascript">		
    function populate (s1, s2) {
          var s1 = document.getElementById (s1);
    	  var s2 = document.getElementById (s2);
    	  s2.innerHTML = "";
    	  if (s1.value == "Obst") {
    	      var optionArray = ["|", 
    		  "apfel|Apfel", 
    		  "banane|Banane", 
    		  "melone|Melone"];
    		  }
    	  else if (s1.value == "Gemüse") {
    	      var optionArray = ["|", 
    		  "tomate|Tomate", 
    		  "paprika|Paprika", 
    		  "salatgurke|Salatgurke"];
    		  }
    	  else if (s1.value == "Fleisch") {
    	      var optionArray = ["|", 
    		  "frikadelle|Frikadelle", 
    		  "fleischwurst|Fleischwurst", 
    		  "currywurst|Currywurst"];
    		  }
    		  
          for (var option in optionArray) {
    	       var pair = optionArray[option].split("|");
    		   var newOption = document.createElement("option");
    		   newOption.value = pair[0];
    		   newOption.innerHTML = pair[1];
    		   s2.options.add(newOption);
    	  }
    	  }
    </script>


  • #2
    Hi,

    bitte die Code Tags im WSIWYG Editor hier nutzen, damit wir den Code besser lesen können!

    Alternativ kannst du deinen Code auch in http://jsfiddle.net/ packen

    mfg Wolf29
    while (!asleep()) sheep++;

    Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

    Kommentar


    • #3
      habe jetzt endlich eine lösung gefunden
      Code:
         function populate (s1, s2) {
            var s1 = document.getElementById (s1);
      	  var s2 = document.getElementById (s2);
      	  s2.innerHTML = "";
      	  if (s1.value == "Obst") {
      	      var optionArray = ["|", 
      		  "apfel|Apfel", 
      		  "banane|Banane", 
      		  "melone|Melone"];
      		  }
      	  else if (s1.value == "Gemüse") {
      	      var optionArray = ["|", 
      		  "tomate|Tomate", 
      		  "paprika|Paprika", 
      		  "salatgurke|Salatgurke"];
      		  }
      	  else if (s1.value == "Fleisch") {
      	      var optionArray = ["|", 
      		  "frikadelle|Frikadelle", 
      		  "fleischwurst|Fleischwurst", 
      		  "currywurst|Currywurst"];
      		  }
      		  
            for (var option in optionArray) {
      	       var pair = optionArray[option].split("|");
      		   var newOption = document.createElement("option");
      		   newOption.value = pair[0];
      		   newOption.innerHTML = pair[1];
      		   s2.options.add(newOption);
      	  }
      	  }
      
      function ad_row(){
      		   var arrTr = document.getElementById("t1").getElementsByTagName("tr");
      		   var count = arrTr.length+1;
                 var table_id = "t1";
                 var table = document.getElementById( table_id );
                 var rows = table.getElementsByTagName( "tr" ).length;
                 var tr = table.insertRow( rows );
                 var td2 = document.createElement( "td" );
                 var td3 = document.createElement( "td" );
                 td2.innerHTML = '<td><select class="grup2" id="gruppe'+count+'" name="gruppe'+count+'" onchange="populate(this.id, \'lebensmittel'+count+'\')"><option value=""></option><option value="Obst"> Obst </option><option value="Gemüse"> Gemüse </option><option value="Fleisch"> Fleisch </option></select></td>'
      		   td3.innerHTML = '<td><select class="lebensmittel2" id="lebensmittel'+count+'" name="lebensmittel'+count+'" ></select></td>';
                 tr.appendChild( td2 );
                 tr.appendChild( td3 );

      Kommentar


      • #4
        Hallöchen,

        Zitat von freaky0602 Beitrag anzeigen
        ich weiß, dass es schwierig ist eine function in innerhtml auszugeben aber es ist nicht unmöglich.
        Nö, das ist nicht schwierig, das ist schlichtweg quatsch.

        Zitat von freaky0602 Beitrag anzeigen
        habe jetzt endlich eine lösung gefunden
        Um sich einen solchen Salat zu ersparen, gibt es u.A. Frameworks wie AngularJS. Damit sind voneinander abhänge Auswahlfelder quasi ein Kinderspiel.

        - Auswahlfelder mit AngularJS

        Viele Grüße,
        lotti

        Kommentar


        • #5
          Normalerweise ist mir Euer neuer Angular-Enthusiasmus ja egal. Aber findest Du ehrlich, dass Dein Beispiel im konkreten Fall besser zu lesen ist? Mit all den DOM-Stubs und letztlich genau der gleichen Konfiguration?
          --

          „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
            Ja, weil der Html-Code wiedergibt, was passiert. Mit jQuery wird das ab einer gewissen Applikationsgröße kaum mehr überschaubar, wenn alles von irgendwo gebunden wird. Außerdem kannst du drastisch viel Code einsparen. Je umfangreicher der UseCase, desto deutlicher der Unterschied.
            Standards - Best Practices - AwesomePHP - Guideline für WebApps

            Kommentar


            • #7
              Zitat von nikosch Beitrag anzeigen
              Normalerweise ist mir Euer neuer Angular-Enthusiasmus ja egal. Aber findest Du ehrlich, dass Dein Beispiel im konkreten Fall besser zu lesen ist? Mit all den DOM-Stubs und letztlich genau der gleichen Konfiguration?
              Definitiv

              Kommentar


              • #8
                Ja, weil der Html-Code wiedergibt, was passiert.
                Hmm, tut jeder Template-Ansatz, bspw. mit Handlebars genauso.
                --

                „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


                • #9
                  Zitat von nikosch Beitrag anzeigen
                  Hmm, tut jeder Template-Ansatz, bspw. mit Handlebars genauso.
                  ... mit dem Unterschied, dass bei Angular alles direkt da ist. Der einfachste Ansatz mit Handlebars wäre, das Template über ein Script-Tag einzubinden, das ganz in der Nähe zum Einsatzort liegt. Und dann hat es auch noch kein automatisches Binding. Und automatisch funktioniert das dann natürlich auch nicht, da du alles erst mal mit Handlebars erzeugen musst. Also: ja, ginge mit anderen Templateengines auch. Aber nicht so einfach.
                  Standards - Best Practices - AwesomePHP - Guideline für WebApps

                  Kommentar


                  • #10
                    Der einfachste Ansatz mit Handlebars wäre, das Template über ein Script-Tag einzubinden, das ganz in der Nähe zum Einsatzort liegt.
                    Handlebars kann genauso native DOM-Strukturen parsen.
                    Und automatisch funktioniert das dann natürlich auch nicht,
                    Genau darum gehts ja. Das wäre explizit und nicht „pseudomagisch“ mit Angular's komischem Attributbinding.

                    Schade dass man optgroup nicht mehrfach schachteln kann. Damit könnnte man das am schönsten abbilden (im konkreten Beispiel würde optgroup alleridings ausreichen.)
                    --

                    „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


                    • #11
                      Ist dieses "Pseudomagische" nicht auch der Grund, warum du mit php arbeitest?
                      Standards - Best Practices - AwesomePHP - Guideline für WebApps

                      Kommentar


                      • #12
                        Nö.
                        --

                        „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


                        • #13
                          nur Javascript ohne Frameworks

                          Zitat von lottikarotti Beitrag anzeigen
                          Hallöchen,
                          Nö, das ist nicht schwierig, das ist schlichtweg quatsch. Um sich einen solchen Salat zu ersparen, gibt es u.A. Frameworks wie AngularJS. Damit sind voneinander abhänge Auswahlfelder quasi ein Kinderspiel.


                          Die Aufgabe in meiner Schulung besteht darin, nur mit reinem Javascript zu programmieren und auf jegliche frameworks zu verzichten.

                          Daher finde ich es schon schwieriger einen Rechner mit dynamisch abhängigen Selectfelder und functions in innerhtml zu programmieren. Zumindestens für mich als Anfänger ...

                          Daher bin ich für jeden Tipp und Hilfe in dieser Richtung dankbar...

                          Kommentar


                          • #14
                            Zitat von freaky0602 Beitrag anzeigen
                            Die Aufgabe in meiner Schulung besteht darin, nur mit reinem Javascript zu programmieren und auf jegliche frameworks zu verzichten.
                            Davon hast du im Ausgangspost kein Wort erwähnt.

                            Zitat von freaky0602 Beitrag anzeigen
                            Daher finde ich es schon schwieriger einen Rechner mit dynamisch abhängigen Selectfelder und functions in innerhtml zu programmieren. Zumindestens für mich als Anfänger ...
                            Vergiss den Mist mit innerHtml. Voneinander abhängige Auswahlfelder lassen sich auch mit Plain-JavaScript relativ sauber abbilden. Hier ein Beispiel dazu, wie das aussehen könnte:

                            - Anhängige Auswahlfelder (Plain Old JavaScript)

                            Viele Grüße,
                            lotti

                            Kommentar


                            • #15
                              vielen dank.

                              Kommentar

                              Lädt...
                              X