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

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)

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

<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)


ähnliche Artikel

Comments (11)
41185 mal gelesen.

11 Kommentare

Leave a comment »

Seiten:

1. Kommentar von: dasinnerevombrötchen
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. Kommentar von: Michael
31. August 2006: 17:53

Super genau das richige, habe lange danach gesucht.

3. Kommentar von: Thomas Heinze
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. Kommentar von: Struppi
1. März 2007: 13:26

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

5. Kommentar von: Thomas Heinze
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. Kommentar von: Struppi
1. März 2007: 14:31

Stimmt, gute Idee.

7. Kommentar von: Phoenix
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. Kommentar von: Struppi
6. November 2007: 13:23

sollte aber.

9. Kommentar von: Marcus Stöhr
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. Kommentar von: Daten zwischen Auswahlfeldern verschieben - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
26. September 2008: 11:12

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

11. Kommentar von: led ziarovky
7. März 2019: 12:58

Super genau das richige, habe lange danach gesucht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful