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)
43792 mal gelesen.

11 Kommentare

direkt zum Formular »

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 Seite verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden..

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
marketing-bankruptcy
marketing-bankruptcy
marketing-bankruptcy
marketing-bankruptcy