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 (10)
17084 mal gelesen.

10 Kommentare

Leave a comment »

Seiten:

1. Comment 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. Comment von: Michael
31. August 2006: 17:53

Super genau das richige, habe lange danach gesucht.

3. Comment von: Thomas Heinze
1. March 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. Comment von: Struppi
1. March 2007: 13:26

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

5. Comment von: Thomas Heinze
1. March 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. Comment von: Struppi
1. March 2007: 14:31

Stimmt, gute Idee.

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

sollte aber.

9. Comment 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. Comment 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 […]

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful