Leaila: Mit "more"-Button ein vorhandenes Dropdownfeld kopieren

Hallo,

folgendes Problem:
Ich habe eine Seite mit einem DropDown-Menu und darunter einen Button "more".
Beim Klick auf "more" soll ein neues Dropdown-menu unter das erste plaziert werden. Beim weiteren Klick, dann das naechste usw.

Das gleiche habe ich schon mit inputfeldern gemacht aber bei dropdownfeldern stehe ich irgendwie aufm schlauch.

jemand ideen?

Mit Javascript kenne ich mich leider nicht so gut aus.

Hier das Beispiel mit den inputFeldern:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
var i = 1;

function NeuesFeld()
{
 var row = document.getElementById('formtable').insertRow(i);
 var cell_1 = row.insertCell(0);
 var cell_2 = row.insertCell(1);

var text = document.createTextNode('Link ' + (i + 1));
 cell_1.appendChild(text);

var input = document.createElement('input');
 input.type = 'text';
 input.name = 'link[]';
 input.size = 60;
 input.maxlength = 150;

cell_2.appendChild(input);

i++;
}
//-->
</script>

</head>
<body>

<form name="posting" action="save.php" method="post">
 <table id="formtable" border="1" cellspacing="0" cellpadding="0" width="100%">
  <tr>
   <td>Link 1</td>
   <td><input name="link[]" type="text" size="60" maxlength="150" /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="button" onclick="NeuesFeld();" value="Feld hinzufügen" /></td>
  </tr>
 </table>
</form>

</body>
</html>

  1. Hi,

    Beim Klick auf "more" soll ein neues Dropdown-menu unter das erste plaziert werden. Beim weiteren Klick, dann das naechste usw.

    Mit Javascript kenne ich mich leider nicht so gut aus.

    jemand ideen?

    Idee: Gehst du Nachlesen!
    http://de.selfhtml.org/javascript/objekte/options.htm

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Idee: Gehst du Nachlesen!
      http://de.selfhtml.org/javascript/objekte/options.htm

      Mach ich!
      Ich habe unter document-Referenz geguckt. Das schaut interessant aus. Mal schauen ob ich was zusammengebastelt bekomme.

      Kann man eigentlich auf das Neu-Machen verzichten und das ganze Select Object irgendwie kopieren?

      LG
      Leaila

      MfG ChrisB

      1. Hi,

        Kann man eigentlich auf das Neu-Machen verzichten und das ganze Select Object irgendwie kopieren?

        Klar, cloneNode existiert.

        Wenn das Element eine ID hat, die bekanntlich dokumentweit eindeutig sein muss, empfiehlt es sich, diese vor dem Einhaengen des Clones in den DOM-Baum zu aendern.

        var clone = element.cloneNode(...);
        clone.id = "neueID";

        LG
        Leaila

        MfG ChrisB

        Bitte zitiere sinnvoll. Grussformeln mit zu zitieren, gehoert nicht dazu.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. var clone = element.cloneNode(...);
          clone.id = "neueID";

          super, das ist viel besser, als alles neu zu machen.
          Danke!

          Gibt es eine Ubersicht wo man die Objektstruktur auf einer Seite sieht?

          Bitte zitiere sinnvoll. Grussformeln mit zu zitieren, gehoert nicht dazu.

          War keine Absicht, nun sollte es aber gehen ;)

          LG
          leaila

          1. Hi,

            Gibt es eine Ubersicht wo man die Objektstruktur auf einer Seite sieht?

            DOM-Inspektor im FireFox, oder die FireBug-Extension,
            Developer Toolbar fuer den IE,
            und neuere Operas haben wohl auch irgendwas in der Art.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
            1. Hallo,

              und neuere Operas haben wohl auch irgendwas in der Art.

              Nennt sich Dragonfly und funktioniert so gut wie ein Forum mit JS (obwohl wir gestern gelernt haben, dass das auch möglich ist). Auf gut deutsch: Ich bevorzuge Firebug Lite für Opera, der funktioniert sogar auch im IE :)

              mfg, Flo

              --
              Developers are dying. Computers are getting trash. CEO's become forgetten. The only remaining things are ideas, lies and crises. So if you want to be immortal, first think, than stop it and go to microsoft and become later a manager at Lehman Brothers...
              sh:) fo:| ch:? rl:( br:^ n4:| ie:{ mo:| va:} de:> zu:} fl:{ ss:) ls:< js:|
              *Zu dem de:> Ich benutze wegen IE im moment noch tabellen, weil dieser display:table noch nicht versteht. Ich werde aber, wenn IE 6 & IE 7 < 10% mein neues CSS-Layout einspielen...
            2. Gibt es eine Ubersicht wo man die Objektstruktur auf einer Seite sieht?

              DOM-Inspektor im FireFox, oder die FireBug-Extension,
              Developer Toolbar fuer den IE,
              und neuere Operas haben wohl auch irgendwas in der Art.

              Zur Ergänzung
              https://redaktion.selfhtml.org/selfhtml-preview/javascript/werkzeuge.html#dom-inspektor

        2. »

          var clone = element.cloneNode(...);
          clone.id = "neueID";

          wie gesagt, es funktioniert ja prima hiermit, aber was mich etwas verwundert. Wenn ich auf den Seitenquelltext gehe (und habe vorher bereits ein paarmal erfolgreich die Dropdownbox kopiert) sehe ich den Code hierfuer nicht. Warum ist das so? Das kann doch nicht sein oder?

          1. Yerf!

            Wenn ich auf den Seitenquelltext gehe (und habe vorher bereits ein paarmal erfolgreich die Dropdownbox kopiert) sehe ich den Code hierfuer nicht. Warum ist das so? Das kann doch nicht sein oder?

            Die "übliche" Seitenquelltext-Funktion zeigt immer den vom Server gelieferten Quelltext. Nachträgliche Änderungen sind da nicht enthalten.

            Wenn du den aktuelle Zustand sehen willst brauchst du entweder einen DOM-Explorer (die genannten AddOns) oder im Firefox die Funktion den markierten Quelltext anzeigen zu lassen (einfach komplette Seite markieren und die entsprechende Funktion im Kontextmenü aufrufen).

            Gruß,

            Harlequin

            --
            <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
            1. Die "übliche" Seitenquelltext-Funktion zeigt immer den vom Server gelieferten Quelltext. Nachträgliche Änderungen sind da nicht enthalten.

              Ok, alles klar. Danke fuer die Antwort. Das wusste ich noch nicht.