✔ Beliebig viele Selectboxen erzeugen lassen

Davicito · 9. Dezember 2012

Ich habe ein Formular, in dem nur eine Selectbox/Auswahliste gefüllt mit Werten steht.
Wenn ich mit onChange den Wert verändere, soll gleich unter der Selectbox eine weitere Selectbox, neu erzeugt werden, mit den gleichen Werten gefüllt, wie bei der ersten.

Wie kann ich das in Javascript umsetzten?
Mein Ansatz:

Javascript:

function knAuswahlFeld(obj)
{				
	if(obj.options[obj.selectedIndex].text != 0)
	{
		var newSelectElement = document.createElement("select");
		var newOptionElement = document.createElement("option");
					
							
		var br = document.createElement("br");		
			 document.body.appendChild(newSelectElement);		
			 document.body.appendChild(br);					
							 													
	}
	else alert("Bin leer");
}

HTML:

...
<form name="formid" >        
   <select size="1" name="selectid"  maxlength="20" onChange="knAuswahlFeld(this)">
      	<option> </option>
	<?php					
	while($row_dat = mysql_fetch_object($result_dat) 
        {
        	echo'<option value='.$row_dat->Kunden_ID.'> '.$row_dat->Kunden.'</option>';
	}                
	?>
   </select>
   <!--div name="divid"></div-->
   <!--fieldset name="fset"> </fieldset-->        
   <!--input type="Button" value="senden" name="b" onClick="knAuswahlFeld(this)"-->
</form>        
...

Mit createElement("Select") kann ich eine neue Selectbox erstellen und mit appendChild() die Selectbox anzeigen lassen. Wie bekomme ich jetzt noch die Werte in die neue Selectbox gefüllt und wie benenne ich diese dann.

Geht das nicht irgendwie mit Nodes? Ich hab keine Ahnung und stehe noch völlig im Dunkeln. Hab jetzt 3 Bücher über JavaScript durch und hab auch schon 3 Tage lang gegoogelt und finde einfach nichts über Dieses Thema.

Ein Beispiel mit einfachen Formular-Eingabefeldern habe ich gefunden.

Javascript:

<script type="text/javascript">         
function insertInputField(pname,pform)
{
    var inputField =  document.createElement("input"); //erzeugt EingabeObjekt
    //zusätzliche Definitionen an das erzeigte Element anhängen
    inputField.setAttribute("type","text"); // Definition des Eingabeobjektes
    inputField.setAttribute("name",pname);  // Definition der FeldEingabevariable z.B. name"foo"
    var br  =  document.createElement("br"); // Erzeuge ZeilenumbruchsObjekt
        document.getElementById(pform).appendChild(br); // Zeilenumbruch
        document.getElementById(pform).appendChild(inputField); //Felderzeugung 
}           
</script>

HTML:

<form >
	<fieldset id="fset">
	</fieldset>
	<input type="button" value="Feld erzeugen" onclick="insertInputField('foo','fset')">
</form>

aber nach diesem Prinzip lassen sich leider keine Selectboxen erzeugen!
Kann mir jemand weiter helfen?

Gruß.

Quaese · 10. Dezember 2012

Hi,

schau dir mal die Methode cloneNode an.

Damit könntest du das Selectfeld clonen und mit appendChild in die DOM-Struktur einhängen.

Ciao
Quaese

Davicito · 10. Dezember 2012

Hallo Quaese,
danke für deinen Tipp. Ich werde es mir mal anschauen.

Hab jetzt mal ne ähnliche Lösung ausgearbeitet.
Hier mal mein Code:

Javascript:

function knAuswahl(obj)
{	
    if(obj.options[obj.selectedIndex].text != 0)
	{				
		// Hole liste aus bestehendem Selectbox-Objekt
		var oldSelect = document.formid.selectid; 
		// Für dynamische Options-Elemente einer Selectbox
		var newOptionElement = new Array(oldSelect.length); 
		//Lege neues Selectbox-Objekt an
		var newSelectElement = document.createElement("select"); 
		// lege erstes Options-Element für Leer-String an
		newOptionElement = document.createElement("option");	
		newOptionElement.text = " ";
		newOptionElement.value = 0;
		//var count = null;
		newSelectElement.add(newOptionElement, null);				
				
		for(var i=1; i < oldSelect.length; i++)
		{											
			newOptionElement[i] = document.createElement("option");
			newOptionElement[i].text = oldSelect[i].text;
			newOptionElement[i].value = oldSelect[i].value;
			newSelectElement.add(newOptionElement[i], newOptionElement[i-1]);													
		}
								
		// Erstellt ein ZeilenumbruchKnoten <br>
		var br = document.createElement("br");
			 // Fügt neuen Knoten Selectbox in das Formular ein	
			 document.body.appendChild(newSelectElement);
			 // Fügt ein TagNode <br> - für Zeilenumbruch ein - in das Formular ein
			 document.body.appendChild(br);
    }
	else alert("Bin leer");
}
</script>

HTML:

...
<?php	
     echo'<form name="formid" >';        
             
    echo'<select size="1" name="selectid"  maxlength="20" >';
    echo'<option> </option>';									
    while($row_dat = mysql_fetch_object($result_dat) OR die('Fehler beim Datenbankzugriff'))
     {
        	echo'<option value='.$row_dat->Kunden_ID.'> '.$row_dat->Kunden.'</option>';
    }                
				
    echo'</select>';
    echo'<!--div name="divid"></div-->';
    echo'<!--fieldset name="fset"> </fieldset-->';       
    echo'<input type="Button" value="senden" name="b" onClick="knAuswahlFeld(selectid)">';
    echo'</form>';
?>        
...

Davicito · 10. Dezember 2012

PS. hab mal mit cloneNode experimentiert, und muss echt sagen, das ich mir die Schreibarbeite sparen konnte.

Javascript:

...
function knAuswahl(obj)
{	
      if(obj.options[obj.selectedIndex].text != 0)
      {
            var newSelectElement = document.formid.selectid.cloneNode(true);

	    var br = document.createElement("br");
	         // Fügt neuen Knoten Selectbox in das Formular ein	
		 document.body.appendChild(newSelectElement);
		 // Fügt ein TagNode <br> - für Zeilenumbruch ein - in das Formular ein
		 document.body.appendChild(br);

} else alert("Bin leer");
...

Oh man und ich mach mir hier die Mühe ^^. Wenn man nur alle Funktionen gleich kennen würde.... Danke dir!

Davicito · 10. Dezember 2012

Jetzt habe ich allerdings mal noch ne andere Frage. Ich habe bislang ja immer nur eine neue Selectbox erzeugt, wenn ich auf den Formularbutton "Senden" geklickt habe. Nun sollte aber immer eine neue Selectbox erzeugt werden, wenn ich den Wert der zuletzt erzeugten Selectbox ändere, mit onChange. Wie kann man das realisieren?

Ich habe ja - nachdem die Seite geladen wurde - nur eine Selectbox, an dem ich den Eventhändler "onChange" anhängen kann. Wie kann ich das nun fortlaufend für jedes neuerzeugte Selectbox-Objekt machen und dabei den onChange der parentNodes deaktiviere, damit auch wirklich nur der onChange der letzten Selectbox/lastChildNode funktioniert?

LG.

Quaese · 10. Dezember 2012

Hi,

übergib der Funktion im onchange-Event das aktuell gewählte Element über die this-Referenz.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function knAuswahl(obj){
  if(obj.options[obj.selectedIndex].text != 0){
    var newSelectElement = obj.cloneNode(true),
      form = obj.form,
      br = document.createElement("br");

    // Fügt neuen Knoten Selectbox in das Formular ein
    form.appendChild(newSelectElement);

    // Fügt ein TagNode <br> - für Zeilenumbruch ein - in das Formular ein
    form.appendChild(br);
  }
  else
    alert("Bin leer");
}
//-->
</script>
</head>
<body>
<form>
  <select onchange="knAuswahl(this);">
    <option>bitte auswählen</option>
    <option value="eins">eins</option>
    <option value="zwei">zwei</option>
  </select>
</form>
</body>
</html>

Ciao
Quaese

Davicito · 11. Dezember 2012

Hi Quaese,
ja danke für deine Unterstützung... habe auch weiter gedacht und bin auch selber drauf gekommen ^^.
Durch das Klonen, werden alle Eigenschaften/Attribute mit geklont, was wirklich sehr praktisch ist. und es klappt auch prima... nun möchte ich aber, wenn ich beim Erzeugen, ab der 2. Selectbox, die Eigenschaft "onChange" wieder löschen bzw. deaktivieren. Das soll mit removeAttribute() funktionieren. Nur muss ich das ja bei dem zu letzt eingefügten ChildElemend/Knoten machen... Jetzt die Frage..

wie bekomme ich jetzt das ChildElement? um da removeAttribute() anzuwenden?

Liebe Grüße.

Quaese · 11. Dezember 2012

Hi,

du hast doch auf newSelectElement das neue Select-Element. Auf diesem kannst du die Methode auch ausführen.

Ciao
Quaese

Davicito · 11. Dezember 2012

Hi,
ja da hast du allerdings vollkommen recht. Hab vor lauter Code nicht mehr gemerkt, dass ich das auch so machen kann ^^.

Javascript:

...
obj.removeAttribute("onChange");
...

und newSelectElement wäre ja das geclonte mit onChange-Charakter geilo! geht auch gut.

Aber nur mal so aus Interesse... Wenn ich auf ein KnotenElement(Selectbox) direkt - über den NodeIndex - zugreifen möchte... wie kann ich das realisieren? Ich meine wenn ich auf 3 Selectboxen davor zugreifen wollte, um etwas zu ändern, wie kann ich das anstellen, wenn ich über getElementByName oder -Id den Namen bzw. die id nicht weiß ?

Gruß.

Quaese · 11. Dezember 2012

Hi,

zum einen gibt es die Methode getElementsByTagName, mit deren Hilfe du alle Elemente eines Tags ermitteln und in einer Kollektion speichern kannst.

Zum anderen kannst du ja beim Clonen die neuen Referenzen in einem globalen Array speichern. Damit kannst du sie anhand ihres Index' ansprechen.

Ciao
Quaese

✔ Beliebig viele Selectboxen erzeugen lassen

Davicito

Erfahrenes Mitglied

Quaese

Moderator

Davicito

Erfahrenes Mitglied

Davicito

Erfahrenes Mitglied

Davicito

Erfahrenes Mitglied

Quaese

Moderator

Davicito

Erfahrenes Mitglied

Quaese

Moderator

Davicito

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge