Einträge kopieren zwischen Optionlisten [Javascript ist Toll!]

31. August 2005 - 15:55

Einträge kopieren zwischen Optionlisten

Ein Skript mit dem man Einträge zwischen zwei Optionlisten mit Javascript kopieren kann.

Quelltext

javascript

function moveTo(form, from, to, del) {

    if(!form || !form.elements) return alert('Kein Formular');

    var source = form.elements[from];

    var target = form.elements[to];

    if(!source) return alert(from + ' existiert nicht im Formular!');

    var idx = source.selectedIndex;

    if(target) {

        for(var i = 0; i < source.length; i++)

              var s = source.options[i];

              if(s.selected) target[target.length] = new Option(  s.text, s.value);

    // eintr?ge l?schen

    if(!target || del)

         var i = source.length

         while(i--) if( source.options[i].selected) source.options[i] = null;

    source.selectedIndex = idx;

Beschreibung

moveTo()

Die Funktion moveTo() erwartet bis zu vier Parameter:

moveTo(Form, Quelle, Ziel, löschen)

Form (Object)
Ist eine Referenz auf ein Formularobjekt. Wenn der Aufruf der Funktion durch ein Formularelement erfolgt, dass im gleichen Formular ist wie die Listen, dann eignet sich am besten this.form für diesen Parameter.
Ansonsten muss dort document.forms['nameDesFormulars'] eingetragen werden.
Quelle (String)
Der Name der Liste aus dem die Einträge verschoben werden sollen.
Ziel (String)
Der Name der Liste in die die Einträge verschoben werden.
löschen (true/false)
Dieser Parameter bestimmt, ob ein verschobener Eintrag aus der Quellliste gelöscht wird.

Der HTML Code für das Beipiel, sieht folgendermaßen aus:

html

<form name="testform" onsubmit="return false;">

<select name="liste1" size="15" style="width:15em" multiple>

<option>------------------------------------</option>

....

</select>

<input type="button" value="&gt;&gt;" name="right"

onclick="moveTo(this.form, 'liste1', 'liste2', true);">

<input type="button" value="&lt;&lt;" name="left"

onclick="moveTo(this.form, 'liste2', 'liste1', true);">

<select name="liste2" size="15" style="width:15em"></select>

</form>

(bereinigt von den Tabellen)

10 Comments

Einen Kommentar hinterlassen »

Kommentare

1. von dasinnerevombrötchen
Donnerstag 6.April 2006: 14:44

SPITZE! genau das hatte ich gesucht. meine "konstrukte" haben zwar mehr oder weniger funktioniert - aber "spaß" ist war anderes

tausend dank für diese einfache aber geniale lösung!

2. von Michael
Donnerstag 31.August 2006: 17:53

Super genau das richige, habe lange danach gesucht.

3. von Thomas Heinze
Donnerstag 1.März 2007: 13:21

Hallo,

wie kann ich dann die Einträge aus Liste2 weiterverarbeiten?

Ich habe versucht, dass Formular abzuschicken und mit PHP auszulesen, aber es kommen keine Daten mit.

4. von Struppi
Donnerstag 1.März 2007: 13:26

Du musst vor dem abschicken (also onsubmit) die Einträge per JS alle selektieren

5. von Thomas Heinze
Donnerstag 1.März 2007: 14:17

Ich habe in das gleich mit beim Kopieren gemacht.

alt:
if(s.selected) target[target.length] = new Option( s.text, s.value);

neu:
if(s.selected) target[target.length] = new Option( s.text, s.value, s.selected);

6. von Struppi
Donnerstag 1.März 2007: 14:31

Stimmt, gute Idee.

7. von Phoenix
Sonntag 4.November 2007: 21:08

Hallo,

ich bekomme es partout nicht hin, daß die Werte übernommen werden, auch nicht mit der Idee von Thomas Heinze. Kann mir jemand weiterhelfen ?

Danke!

Phoenix

nospam at musicalzirkel dot de

8. von Struppi
Dienstag 6.November 2007: 13:23

sollte aber.

9. von Marcus Stöhr
Mittwoch 14.November 2007: 14:53

Danke für den Code.

Beim probieren habe ich aber festgestellt, dass der FF 2.0.0.9 beim verschieben von rechts nach links eine Exception wirft:

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLSelectElement.selectedIndex]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://javascript.jstruebig.de/javascript/38/ :: moveTo :: line 233" data: no]

Den Fehler verursacht die Zeile mit der folgenden Anweisung:

source.selectedIndex = idx;

Kann man das beheben/umgehen?

10. von Daten zwischen Auswahlfeldern verschieben - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
Freitag 26.September 2008: 11:12

[...] AW: Daten zwischen Auswahlfeldern verschieben - Heute, 11:12 [Javascript ist Toll!] > Einträge kopieren zwischen Optionlisten [...]

Javascript ist Toll!