Wert von einer Liste in eine andere kopieren

[Moritz]

Hallo zusammen,
ich habe ein HTML-Dokument mit zweit Listen (<select name="..."><option value="...">...</option>....) und einem Button.
Nun möchte ich, dass man in der ersten Liste einen Eintrag auswählen kann, auf den Button klickt und dieser Wert dann auch in der zweiten Liste erscheint.
Ist das mit JavaScript möglich? Wenn ja, kann mir jemand Tipps oder einen Ansatz geben?

[romy]

Hi Moritz,

ich habe ein HTML-Dokument mit zweit Listen (<select name="..."><option value="...">...</option>....) und einem Button.
Nun möchte ich, dass man in der ersten Liste einen Eintrag auswählen kann, auf den Button klickt und dieser Wert dann auch in der zweiten Liste erscheint.
Ist das mit JavaScript möglich? Wenn ja, kann mir jemand Tipps oder einen Ansatz geben?

Ja, es ist möglich.
Du definierst eine Javascriptfunktion, welche du mit Klick auf den Button auslöst. In dieser weist du den Inhalt des einen Elements dem anderen Element zu.
Eine Hilfestellung könntest du finden unter:
getElementsByTagName()

Viel Spaß!

ciao
romy

[Arthur Dent]

Hi,

Hallo zusammen,
ich habe ein HTML-Dokument mit zweit Listen (<select name="..."><option value="...">...</option>....) und einem Button.
Nun möchte ich, dass man in der ersten Liste einen Eintrag auswählen kann, auf den Button klickt und dieser Wert dann auch in der zweiten Liste erscheint.

Schau dir mal DOM an, z.B. appendChild()

Gruß,
Arthur D.

[Mathias Brodala]

Hallo Moritz.

Nun möchte ich, dass man in der ersten Liste einen Eintrag auswählen kann, auf den Button klickt und dieser Wert dann auch in der zweiten Liste erscheint.
Ist das mit JavaScript möglich? Wenn ja, kann mir jemand Tipps oder einen Ansatz geben?

Ich werde dir hier einen beispielhaften Ansatz geben, welchen du unter Zuhilfenahme der Kommentare und verlinkten Erklärungen deinen Anforderungen gemäß anpassen kannst.

Das HTML:

<form action="">  
  <p>  
    <select>  
      <option value="foo">Foo</option>  
      <option value="bar">Bar</option>  
      <option value="baz">Baz</option>  
      <option value="qux">Qux</option>  
    </select>  
  </p>  
  <p>  
    <select>  
      <option>Bitte auswählen …</option>  
    </select>  
  </p>  
</form>

Das JS dazu:

window.[ref:self811;javascript/sprache/eventhandler.htm#onload@title=onload] = function() { // Beim Laden, da uns sonst nicht alle Elemente zur Verfügung ständen  
  
  // Alle select–Elemente innerhalb des ersten Formulares  
  var s = [ref:self811;javascript/objekte/document.htm@title=document].[ref:self811;javascript/objekte/forms.htm@title=forms][0].[ref:self811;javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName]('select');  
  
  // Der Button wird dynamisch generiert, da er ohne JS keinen Zweck hätte  
  var b = document.[ref:self811;javascript/objekte/document.htm#create_element@title=createElement]('[ref:self811;javascript/objekte/htmlelemente.htm#input@title=input]');  
      b.type = 'button';  
      b.value = 'Auswahl übernehmen';  
  
      // Was beim Klick auf den Button passieren soll  
      b.[ref:self811;javascript/sprache/eventhandler.htm#onclick@title=onclick] = function() { // Eine anonyme Funktion  
  
        // Das derzeitig im ersten select–Element ausgewählte option–Element klonen  
        var o = s[0].[ref:self811;javascript/objekte/options.htm@title=options][s[0].[ref:self811;javascript/objekte/options.htm#selected_index@title=selectedIndex]].[ref:self811;javascript/objekte/node.htm#clone_node@title=cloneNode](true);  
  
        // Die im zweiten select–Element bereits bestehenden option–Elemente durchlaufen  
        for (var i = 0; i < s[1].options.[ref:self811;javascript/objekte/options.htm#length@title=length]; ++i) {  
  
          /* Wenn es bereits ein option–Element mit dem selben Textinhalt wie das oben  
             kopierte option–Element gibt, fügen wir es nicht in das zweite  
             select—Element ein  
           */  
          if (s[1].options[i].[ref:self811;javascript/objekte/options.htm#text@title=text] == o.text) {  
  
            return;  
  
          }  
        }  
  
        /* Ansonsten fügen wir das geklonte option–Element dem zweiten select–Element  
           hinzu (zur Methodik [ref:self811;javascript/objekte/options.htm#neue_elemente@title=siehe SELFHTML])  
         */  
        s[1].options[s[1].options.length] = o;  
  
      };  
  
  // Den Button am Ende des ersten Absatzes im Formular einfügen  
  document.forms[0].getElementsByTagName('p')[0].[ref:self811;javascript/objekte/node.htm#append_child@title=appendChild](b);  
  
};

Einen schönen Samstag noch.

Gruß, Mathias

[Moritz]

Hallo zusammen,
vielen Dank für eure Tipps und Ratschläge. Ich denke mal, dass ich das jetzt hinbekommen werde;-)