Select Box vervielfachen

Tiger_XT · 10. August 2006

Hallöchen

Ich habe ein klitzkleines Problem. Und zwar will ich eine Selectbox mit JavaScript vervielfachen.

Nehmen wir an wir haben folgende Selectbox:

Code:

<select name="aggregat">
  <option value="1">fest</option>
  <option value="2">fluessig</option>
  <option value="3">gesfoermig</option>
</select>

Ich möchte das ganze jetzt so haben, das ein Button, oder ein Link hinter dieser Select Box steht, auf den ich nur klicken braucht und eine zweite Selectbox erscheint. Das ganze soll bis ins unendliche machbar sein.

Danach muss ich dann die Selectbox Eingabe an PHP übergeben, was jetzt kein Problem ist.

Da ich aber mit JavaScript sogut wie nichts am Hut habe, habe ich mir zwar ein paar Schnipsel gesucht, jedoch habe ich nicht grade viel gefunden und das was ich gefunden habe, damit konnte ich nicht viel anfangen, denn ich hab nur Bahnhof verstanden, was den Code anging. Würde jemand so nett sein und mir erklären wie das ganze funktioniert, oder mir ein kleines Script basteln?

Vielen dank im Vorraus.

Tiger

Quaese · 10. August 2006

Hi,

die Methode cloneNode dient wie der Name schon verrät zum clonen von Elementknoten. Mehr
dazu hier.

Ein kleines Beispiel, das die Funktionsweise demonstriert:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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 cloneIt(obj){
  // Gleichen Knoten wie den Elternknoten (SPAN) erstellen
  objClone = obj.parentNode.cloneNode(true);
  // Knoten in Dokumentbaum einhängen
  document.getElementById("parentID").appendChild(objClone);
}
 //-->
</script>
</head>
<body>
<form>
<div id="parentID" style="border:1px solid #ccc;">
  <span><!-- Gruppiert Selectbox und Button -->
    <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>
    <input type="button" onclick="return cloneIt(this);" value="cloneIt">
  </span>
</div>
</form>
</body>
</html>

Ciao
Quaese

Select Box vervielfachen

Tiger_XT

Grünschnabel

Quaese

Moderator

Neue Beiträge