zwischen Auswahllisten Werte tauschen

[Markus]

So und ich mal wieder^^

nun folgendes Problem, ich würde gerne 2 Auswahllisten (<select name="test" size="4" multiple>) einbauen und über Buttons die Werte tauschen können, wobei auch Mehrfachauswahl möglich sein soll, des weiteren soll man Werte in den einzelnen Listen löschen können, sowie über ein Text-inputfeld hinzufügen können. Beim Löschen soll es auch so sein, dass man wieder mehrere Werte löschen kann. Hab schon gegoogelt, weiß aber einfach nicht unter was man am besten sucht. Wäre über Hilfe dankbar.

MfG

Markus

[Facetious]

also theoretisch muss es so gehen:

per javascript die ausgewählten werte rausholen und dann bearbeiten, dass heisst, in eine zwischenvar. kopieren und dann wo anders eintragen, bzw löschen

das eintragen ist auch ganz leicht

es gibt eine js methode add(), welches ein neues element hinzufügt

hth Facetious

[daniel84]

Hallo Markus,

nun folgendes Problem, ich würde gerne 2 Auswahllisten (<select name="test" size="4" multiple>) einbauen und über Buttons die Werte tauschen können, wobei auch Mehrfachauswahl möglich sein soll

So weit habe ich das mal für einen Kollegen im aspforum.de gemacht: http://daniel-erni.ch/codes/2-multiple-selects.html.

des weiteren soll man Werte in den einzelnen Listen löschen können,

http://de.selfhtml.org/javascript/objekte/options.htm#elemente_loeschen

sowie über ein Text-inputfeld hinzufügen können.

http://de.selfhtml.org/javascript/objekte/options.htm#elemente_loeschen

Beim Löschen soll es auch so sein, dass man wieder mehrere Werte löschen kann.

Dann musst du die ausgewählten Elemente mittels for-Schlaufe durchgehen. Wie das geht, kannst du dem Quellcode meines Beispiels entnehmen. Wichtig: Mit dem höchsten Index beginnen und runterzählen, nicht umgekehrt!

Gruss aus Luzern,
Daniel

[Markus]

Hallo Markus,

nun folgendes Problem, ich würde gerne 2 Auswahllisten (<select name="test" size="4" multiple>) einbauen und über Buttons die Werte tauschen können, wobei auch Mehrfachauswahl möglich sein soll

So weit habe ich das mal für einen Kollegen im aspforum.de gemacht: http://daniel-erni.ch/codes/2-multiple-selects.html.

des weiteren soll man Werte in den einzelnen Listen löschen können,

http://de.selfhtml.org/javascript/objekte/options.htm#elemente_loeschen

sowie über ein Text-inputfeld hinzufügen können.

http://de.selfhtml.org/javascript/objekte/options.htm#elemente_loeschen

Beim Löschen soll es auch so sein, dass man wieder mehrere Werte löschen kann.

Dann musst du die ausgewählten Elemente mittels for-Schlaufe durchgehen. Wie das geht, kannst du dem Quellcode meines Beispiels entnehmen. Wichtig: Mit dem höchsten Index beginnen und runterzählen, nicht umgekehrt!

Gruss aus Luzern,
Daniel

nun so wie du es beschreibst hatte ich es mir auch gedacht, aber nur mal eine verständnisfrage: warum von höchsten index aus zählen?

[daniel84]

Hallo Markus,

Dann musst du die ausgewählten Elemente mittels for-Schlaufe durchgehen. Wie das geht, kannst du dem Quellcode meines Beispiels entnehmen. Wichtig: Mit dem höchsten Index beginnen und runterzählen, nicht umgekehrt!

nun so wie du es beschreibst hatte ich es mir auch gedacht, aber nur mal eine verständnisfrage: warum von höchsten index aus zählen?

Ok, anhand eines Beispiels: Du hast 5 Elemente mit den Indizes 0, 1, 2, 3, 4. Nun markierst du Eintrag 2 und 3, also Index 1 und 2. Wenn du nun von 0 zu zählen beginnst, läuft das in der for-Schlaufe so ab:

• Index 0 bleibt
• Index 1 wird gelöscht
• vorher markierter Index 2 ist jetzt Index 1, da ja die vorherige Option gelöscht wurde!

Und das gibt dann unerwünschte Effekte, d.h. es wird ein falscher Eintrag gelöscht. Deshalb beginnst du mit dem höchsten Index und löschst quasi "von hinten nach vorne", da dann das wegfallen eines Eintrages keinen Einfluss auf die Indizes der anderen Einträge hat.

Hm...verstanden?! :-/

Gruss aus Luzern,
Daniel

[Markus]

Hallo Markus,

Dann musst du die ausgewählten Elemente mittels for-Schlaufe durchgehen. Wie das geht, kannst du dem Quellcode meines Beispiels entnehmen. Wichtig: Mit dem höchsten Index beginnen und runterzählen, nicht umgekehrt!

nun so wie du es beschreibst hatte ich es mir auch gedacht, aber nur mal eine verständnisfrage: warum von höchsten index aus zählen?

Ok, anhand eines Beispiels: Du hast 5 Elemente mit den Indizes 0, 1, 2, 3, 4. Nun markierst du Eintrag 2 und 3, also Index 1 und 2. Wenn du nun von 0 zu zählen beginnst, läuft das in der for-Schlaufe so ab:

• Index 0 bleibt
• Index 1 wird gelöscht
• vorher markierter Index 2 ist jetzt Index 1, da ja die vorherige Option gelöscht wurde!

Und das gibt dann unerwünschte Effekte, d.h. es wird ein falscher Eintrag gelöscht. Deshalb beginnst du mit dem höchsten Index und löschst quasi "von hinten nach vorne", da dann das wegfallen eines Eintrages keinen Einfluss auf die Indizes der anderen Einträge hat.

Hm...verstanden?! :-/

Gruss aus Luzern,
Daniel

stimmt, jetzt hab ich es verstanden, aber nochmal eine frage^^

wenn ich mehrere einträge markiere und in die andere auswahlliste verschiebe, dann werden diese in umgedrehter reihenfolge aufgelistet. kann man das irgendwie so programmieren, dass er es in richtiger reihenfolge verschiebt? hab mir da jetzt schon die zähne ausgebissen, es ist unbedingt erforderlich für mich, das die reihenfolge erhalten bleibt.

MfG

salami

[daniel84]

Hallo Markus,

Dann musst du die ausgewählten Elemente mittels for-Schlaufe durchgehen. Wie das geht, kannst du dem Quellcode meines Beispiels entnehmen. Wichtig: Mit dem höchsten Index beginnen und runterzählen, nicht umgekehrt!

nun so wie du es beschreibst hatte ich es mir auch gedacht, aber nur mal eine verständnisfrage: warum von höchsten index aus zählen?

Ok, anhand eines Beispiels: Du hast 5 Elemente mit den Indizes 0, 1, 2, 3, 4. Nun markierst du Eintrag 2 und 3, also Index 1 und 2. Wenn du nun von 0 zu zählen beginnst, läuft das in der for-Schlaufe so ab:

• Index 0 bleibt
• Index 1 wird gelöscht
• vorher markierter Index 2 ist jetzt Index 1, da ja die vorherige Option gelöscht wurde!

Und das gibt dann unerwünschte Effekte, d.h. es wird ein falscher Eintrag gelöscht. Deshalb beginnst du mit dem höchsten Index und löschst quasi "von hinten nach vorne", da dann das wegfallen eines Eintrages keinen Einfluss auf die Indizes der anderen Einträge hat.

stimmt, jetzt hab ich es verstanden, aber nochmal eine frage^^

wenn ich mehrere einträge markiere und in die andere auswahlliste verschiebe, dann werden diese in umgedrehter reihenfolge aufgelistet. kann man das irgendwie so programmieren, dass er es in richtiger reihenfolge verschiebt? hab mir da jetzt schon die zähne ausgebissen, es ist unbedingt erforderlich für mich, das die reihenfolge erhalten bleibt.

Hm, jetzt wirds kompliziert...;-( Wahrscheinlich wäre jetzt die Lösung, dass du doch raufzählst (von 0 bis Anzahl Options), und das vorher beschriebene Problem irgendwie auffängst, z.B. mit einem zusätzlichen Counter, der die Index-Verschiebungen (durch das Entfernen) handlet...

Oder ein zweiter Ansatz: Anstatt du die Options entfernst, setzt du einfach ihren Value auf Leerstring (''). Dann fallen die Index-Verschiebungen weg, und du kannst ganz normal von 0 nach Anzahl Options zählen. Wenn dann alle selektierten Options verschoben sind, gehst du die "Quell-Auswahlliste" nochmals durch (hier unbedingt wieder vom maximalen Wert nach 0) und entfernst alle Options, deren Value '' (Leerstring) ist.

Die zweite Variante ist wohl die bessere und einfachere. Ich hoffe, du hast verstanden, was ich ausdrücken möchte - sonst einfach nochmals fragen!

Gruss aus Luzern,
Daniel

[Markus]

Hallo Markus,

Dann musst du die ausgewählten Elemente mittels for-Schlaufe durchgehen. Wie das geht, kannst du dem Quellcode meines Beispiels entnehmen. Wichtig: Mit dem höchsten Index beginnen und runterzählen, nicht umgekehrt!

nun so wie du es beschreibst hatte ich es mir auch gedacht, aber nur mal eine verständnisfrage: warum von höchsten index aus zählen?

Ok, anhand eines Beispiels: Du hast 5 Elemente mit den Indizes 0, 1, 2, 3, 4. Nun markierst du Eintrag 2 und 3, also Index 1 und 2. Wenn du nun von 0 zu zählen beginnst, läuft das in der for-Schlaufe so ab:

• Index 0 bleibt
• Index 1 wird gelöscht
• vorher markierter Index 2 ist jetzt Index 1, da ja die vorherige Option gelöscht wurde!

Und das gibt dann unerwünschte Effekte, d.h. es wird ein falscher Eintrag gelöscht. Deshalb beginnst du mit dem höchsten Index und löschst quasi "von hinten nach vorne", da dann das wegfallen eines Eintrages keinen Einfluss auf die Indizes der anderen Einträge hat.

stimmt, jetzt hab ich es verstanden, aber nochmal eine frage^^

wenn ich mehrere einträge markiere und in die andere auswahlliste verschiebe, dann werden diese in umgedrehter reihenfolge aufgelistet. kann man das irgendwie so programmieren, dass er es in richtiger reihenfolge verschiebt? hab mir da jetzt schon die zähne ausgebissen, es ist unbedingt erforderlich für mich, das die reihenfolge erhalten bleibt.

Hm, jetzt wirds kompliziert...;-( Wahrscheinlich wäre jetzt die Lösung, dass du doch raufzählst (von 0 bis Anzahl Options), und das vorher beschriebene Problem irgendwie auffängst, z.B. mit einem zusätzlichen Counter, der die Index-Verschiebungen (durch das Entfernen) handlet...

Oder ein zweiter Ansatz: Anstatt du die Options entfernst, setzt du einfach ihren Value auf Leerstring (''). Dann fallen die Index-Verschiebungen weg, und du kannst ganz normal von 0 nach Anzahl Options zählen. Wenn dann alle selektierten Options verschoben sind, gehst du die "Quell-Auswahlliste" nochmals durch (hier unbedingt wieder vom maximalen Wert nach 0) und entfernst alle Options, deren Value '' (Leerstring) ist.

Die zweite Variante ist wohl die bessere und einfachere. Ich hoffe, du hast verstanden, was ich ausdrücken möchte - sonst einfach nochmals fragen!

Gruss aus Luzern,
Daniel

Jo ist klar was du meinst, bin ja nicht ganz der blutige anfänger ;)
Vielen Dank so weit, hatte mir auch schon überlegt noch eine versteckte auswahlliste einzufügen, in der die werte erst zwischengelagert werden und sortiert werden und dann erst in das endgültige übertragen werden. aber deine lösung ist schon besser. sollte sich realisieren lassen.

[Markus]

für allle die es interessiert, die lösung sieht wie folgt aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
<!--
function Hinzufuegen1() {
  for (i=0;i<document.Zuweisung1.Menu1.length;i++)
  {
    if (document.Zuweisung1.Menu1.options[i].selected)
    {
      NeuerEintrag = new

Option(document.Zuweisung1.Menu1.options[i].value,document.Zuweisung1.Menu1.options[i].value,false,true);
      document.Zuweisung2.Menu2.options[document.Zuweisung2.Menu2.length] = NeuerEintrag;
      document.Zuweisung1.Menu1.options[i].value = '';
    }
  }
 clearstring1();
}

function clearstring1()
{
  for (h=document.Zuweisung1.Menu1.length-1;h>(-1);h--)
  {
    if (document.Zuweisung1.Menu1.options[h].value=='')
    {
      document.Zuweisung1.Menu1.options[h] = null;
    }
  }
}

function Hinzufuegen2() {
  for (j=0;j<document.Zuweisung2.Menu2.length;j++)
  {
    if (document.Zuweisung2.Menu2.options[j].selected)
    {
      NeuerEintrag = new

Option(document.Zuweisung2.Menu2.options[j].value,document.Zuweisung2.Menu2.options[j].value,false,true);
      document.Zuweisung1.Menu1.options[document.Zuweisung1.Menu1.length] = NeuerEintrag;
      document.Zuweisung2.Menu2.options[j].value = '';
    }
  }
 clearstring2();
}

function clearstring2()
{
  for (g=document.Zuweisung2.Menu2.length-1;g>(-1);g--)
  {
    if (document.Zuweisung2.Menu2.options[g].value=='')
    {
      document.Zuweisung2.Menu2.options[g] = null;
    }
  }
}

//-->
</script>

</head>

<body>
<table border="0" width="100%">
    <tr>
        <td width="50%" align="right">Zur Verf&uuml;gung<img border="0" src="../images/leer_transparent.gif" width="60"

height="1"></td>
        <td width="0%" align="center" valign="top"> </td>
        <td width="50%" align="left"><img border="0" src="../images/leer_transparent.gif" width="60"

height="1">Zugewiesen</td>
    </tr>
    <tr>
        <td width="50%" align="right">
        <form name="Zuweisung1" action="">
        <select name="Menu1" size="6" multiple style="width:200">
        <option value="Heino">Heino</option>
        <option value="Michael Jackson">Michael Jackson</option>
        <option value="Tom Waits">Tom Waits</option>
        <option value="Nina Hagen">Nina Hagen</option>
        <option value="Marianne Rosenberg">Marianne Rosenberg</option>
        </select>
        </form>
        </td>
        <td width="60" align="center" valign="top">&nbsp;<p>
        <a href="#" onclick="Hinzufuegen1()">-----></a>
        <p><a href="#" onclick="Hinzufuegen2()"><------</a></td>
        <td width="50%" align="left"><form name="Zuweisung2" action="">
        <select name="Menu2" size="6" multiple style="width:200">
        </select>
        </form>
        </td>
    </tr>
</table>
</body>
</html>

wird alles noch etwas übersichtlicher geschrieben und verkürzt. aber das grundgerüst steht und man sollte es verstehen ;)

[Struppi]

für allle die es interessiert, die lösung sieht wie folgt aus:

es geht noch einfacher:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script type="text/javascript">

function move(von, nach)
{
     var i = von.options.length;
     while(i--)
     {
        if(von.options[i].selected)
        {
             nach.options[nach.options.length] = von.options[i];
             von.options[i] = null;
        }
     }

}
</script>
</head>
<body>
<table>
<tr>
<th align="center">Zur Verf&uuml;gung
</th>
<th> </th>
<th align="center">Zugewiesen</th>
</tr>
<tr>
<td>
<form name="Zuweisung1" action="">
<select name="Menu1" size="6" multiple style="width:200">
<option value="Heino">Heino</option>
<option value="Michael Jackson">Michael Jackson</option>
<option value="Tom Waits">Tom Waits</option>
<option value="Nina Hagen">Nina Hagen</option>
<option value="Marianne Rosenberg">Marianne Rosenberg</option>
</select>
</form>
</td>

<td>
<p>
<a href="#" onclick="move(document.Zuweisung1.Menu1, document.Zuweisung2.Menu2)">-----></a>

<p>
<a href="#" onclick="move(document.Zuweisung2.Menu2, document.Zuweisung1.Menu1)"><------</a>
</td>

<td>
<form name="Zuweisung2" action="">
<select name="Menu2" size="6" multiple style="width:200">
</select>
</form>
</td>
</tr>
</table>
</body>
</html>

Struppi.