Wert von einer Liste in eine andere kopieren

[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