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.formfür diesen Parameter.
Ansonsten muss dortdocument.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=">>" name="right" |
onclick="moveTo(this.form, 'liste1', 'liste2', true);"> |
<input type="button" value="<<" name="left" |
onclick="moveTo(this.form, 'liste2', 'liste1', true);"> |
<select name="liste2" size="15" style="width:15em"></select> |
</form> |
(bereinigt von den Tabellen)
Comments (10)
3155 mal gelesen.
3155 mal gelesen.
10 Kommentare Einen Kommentar hinterlassen »
Kommentare
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!
Donnerstag 31.August 2006: 17:53
Super genau das richige, habe lange danach gesucht.
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.
Donnerstag 1.März 2007: 13:26
Du musst vor dem abschicken (also onsubmit) die Einträge per JS alle selektieren
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);
Donnerstag 1.März 2007: 14:31
Stimmt, gute Idee.
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
Dienstag 6.November 2007: 13:23
sollte aber.
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?
Freitag 26.September 2008: 11:12
[...] AW: Daten zwischen Auswahlfeldern verschieben - Heute, 11:12 [Javascript ist Toll!] > Einträge kopieren zwischen Optionlisten [...]
Einen Kommentar hinterlassen