kostenloser Webspace werbefrei: lima-city

Bei Auswahl der Dropdown weitere Optionen zeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   kill-a-teddy

   

   kill-a-teddy hat kostenlosen Webspace.

   11:05, 5.11.2012

   Wenn man in einer Drop Down Liste ein Element anklickt, sollen weitere Optionen angezeigt werden, die je nach Element variieren.. Wie würde man so etwas realisieren?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. h******g

   11:24, 5.11.2012

   Mit verschachtelten Auswahllisten (http://de.selfhtml.org/html/formulare/auswahl.htm#menuestruktur), wobei du je nach ausgewähltem Eintrag per JS den HTML-Code for das select-Feld änderst (z.B. mit InnerHTML).
4. Autor dieses Themas

   kill-a-teddy

   

   kill-a-teddy hat kostenlosen Webspace.

   11:27, 5.11.2012

   hm4-blog schrieb:
   Mit verschachtelten Auswahllisten (http://de.selfhtml.org/html/formulare/auswahl.htm#menuestruktur), wobei du je nach ausgewähltem Eintrag per JS den HTML-Code for das select-Feld änderst (z.B. mit InnerHTML).

   
   
   Hmm da hab ich mich falsch ausgedrückt..
   Stell dir vor, du hast einen Eintrag bei Optionen, der heißt "Name"... Du klickst den an, dann soll darunter eine neue Spalte in der Tabelle erzeugt werden mit dem <label>Weitere Optionen</label> <input type="checkbox">Auch Nachname?</input>
   
   Oder wenn man wählt Straße? -> Auch Hausnummer?
   
   Ist das so verständlicher, was ich meine? :)
   
   //EDIT:
   Hab also schon mal ein bisschen geschafft:
   

   function insertAfter( referenceNode, newNode )
   {
       referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
   }
   
   function get(){
         if (document.getElementById('sc1').value == "Name"){
       	  // create a new div element
       	  // and give it some content
       	  newtr = document.createElement("tr");
       	  newtd1 = document.createElement("td");
       	  newtd2 = document.createElement("input");
       	  newlabel = document.createElement("label");
       	  newlabelText = document.createTextNode("Weitere Optionen:");
       	  newlabel.appendChild(newlabelText); //add the text node to the newly created div.
       	  newtd1.appendChild(newlabel);
       	  newtr.appendChild(newtd1);
       	  newtr.appendChild(newtd2);
       	  
       	  // add the newly created element and it's content into the DOM
       	  // Get that thing
       	  my_sc1 = document.getElementById("sc1");
       	  insertAfter(my_sc1, newtr);
         }
       }

   
   
   Allerdings bekomm ich net hin, dass die tr erst nach Ende der letzten Tr kommt.. So ist das Design ruiniert :/
   
   
   Beitrag zuletzt geändert: 5.11.2012 11:45:47 von kill-a-teddy

5. h******g

   12:05, 5.11.2012

   So wie es aussieht wird der Code nach dem Element "sc1" eingefügt, habe es aber jetzt nicht genau angeschaut.
   
   Ich würde trotzdem die innerHTML-Funktion verwenden - finde ich einfacher.
   Du erstellst einfach leere Elemente und gibst ihnen eine ID. Z.B.:
   

   <span id="Frage2"></span><span id="Frage3"></span><span id="Frage4"></span>

   
   Die erste Frage steht schon fertig im Code. Z.B.:
   

   <select id="Frage1" onChange="JSFunc()"><option>blabla</option></select>

   
   Die Funktion JSFunc() überprüft den ausgewählten Wert und erzeugt in einem leeren Objekt eine neue Frage:
   

   function JSFunc() {
    if(document.getElementById('Frage1').options[document.getElementById('Frage1').selectedIndex].value == 'blabla') {
     document.getElementById('Frage2').innerHTML = 'Code für Frage 2';
    }
   }

   
   Dann steht im span mit der ID "Frage2" der Text "Code für Frage 2", welchen du natürlich durch ein select- oder input-Element ersetzen musst.
   Das ganze könnte man mit Funktionsparametern dann noch flexibel machen. Soll ja nur eine Anregung sein.
   
   lg
   
6. Autor dieses Themas

   kill-a-teddy

   

   kill-a-teddy hat kostenlosen Webspace.

   12:33, 5.11.2012

   Danke :)
   
   Hab es nun so:
   
   

   function insertAfter( referenceNode, newNode )
   {
       referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
   }
   
   function get(){
         if (document.getElementById('sc1').value == "Name"){
       	  //Tabelle bauen
       	  newtr = document.createElement("tr");
       	  
       	  //spalte1
       	  newtd1 = document.createElement("td");
       	  newlabel = document.createElement("label");
       	  newlabelText = document.createTextNode("Weitere Optionen:");
       	  newlabel.appendChild(newlabelText);
       	  newtd1.appendChild(newlabel);
       	  
       	  //spalte2
       	  newtd2 = document.createElement("td");
       	  newcheckbox = document.createElement("input");
       	  newcheckbox.setAttribute('type', 'checkbox');
       	  newcheckbox.setAttribute('name', 'wth_name');
       	  newcheckbox.setAttribute('value', "Auch Nachname?");
       	  newtd2.appendChild(newcheckbox);
       	  
       	  //Zusammen setzen
       	  newtr.appendChild(newtd1);
       	  newtr.appendChild(newtd2);
       	  
       	  // add the newly created element and it's content into the DOM
       	  // Get that thing
       	  my_sc1 = document.getElementById("type");
       	  insertAfter(my_sc1, newtr);
         }
       }

   
   
   ##Kann geschlossen werden##

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?