Salut...

ich möchte eine Listbox (<select>) über zwei Buttons "hoch" und "runter" manuell umsortieren können. Mein - für mich naheliegender - Ansatz klappt nicht:

// Aktuell fokussierten Eintrag ermitteln
var current = document.formular.listbox.selectedIndex;

// Aktuell fokussierten Eintrag aus Listbox auslesen
var o1 = document.formular.listbox.options[current];

// Folgenden Eintrag ebenfalls auslesen
var o2 = document.formular.listbox.options[current+1];

// Nun noch tauschen
document.formular.listbox.options[current] = o2;
document.formular.listbox.options[current+1] = o1;

Klappt aber nicht. Nun könnte man alternativ die ganze Liste in ein Array einlesen, die Listbox komplett leeren, das Array umsortieren und schließlich zur Listbox zurückschreiben. Aber... muß das wirklich so aufwändig sein?

hi Tömsken,

versuchs doch mal so:

// Aktuell fokussierten Eintrag ermitteln
var current = document.formular.listbox.selectedIndex;

// Aktuell fokussierten Eintrag aus Listbox auslesen
var o1 = document.formular.listbox.options[current].value;

// Folgenden Eintrag ebenfalls auslesen
var o2 = document.formular.listbox.options[current+1].value;

// Nun noch tauschen
document.formular.listbox.options[current].value = o2;
document.formular.listbox.options[current+1].value = o1;

Grüße Oesi
Ich weiß, dass ich nichts weiß... (Sokrates)

ich habs noch mal ausprobiert, so geht's natürlich nicht.

1. muss man value UND text tauschen
2. abprüfen, ob der letzte Eintrag selektiert wurde

hier die getestete Version:
<SCRIPT LANGUAGE="JavaScript" type"text/javascript">
<!--
function tausch(){
// Aktuell fokussierten Eintrag ermitteln und Ende beachten
var current1 = document.formular.listbox.selectedIndex;
var current2 = (current1 + 1) % document.formular.listbox.length;
// tauschen
swap(document.formular.listbox.options[current1],document.formular.listbox.options[current2]);
}
function swap(a,b){
var v = a.value; a.value = b.value; b.value = v;
var t = a.text; a.text = b.text; b.text = t;
}
//-->
</SCRIPT>
<FORM name="formular" METHOD=POST ACTION="">
<SELECT NAME="listbox" size="5" onChange="tausch()">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</SELECT>
</FORM>

Grüße Oesi
Ich weiß, dass ich nichts weiß... (Sokrates)

Oesi - that's it! Man muss noch "options[].text" mitnehmen, aber dann geht's. Hier ein (funktionierendes) Script:

function moveItem(updn) {
// Verschiebt den aktuellen Listeneintrag um eine Position
// nach oben (updn==-1)
// oder nach unten (updn==1).
var curr = document.formular.chapters.selectedIndex;

if ( (curr >= 0) && ((updn > 0) ?
(curr < document.formular.chapters.length-1) : (curr > 0)) ) {
with (document.formular.chapters) {
var o1 = options[curr];
var o3 = new Option(o1.text, o1.value, false, true);
var o2 = options[curr + updn];
o1.text = o2.text; o1.value = o2.value;
o2.text = o3.text; o2.value = o3.value;
focus();
selectedIndex = curr + updn;
}
}
}

:) Da haben wir uns knapp verpasst - 8 Minuten haben wir also an Version #2 gebastelt.
Dank' Dir!

ich habe mein Script noch mal geändert, jetzt ist es deutlich kürzer.

Grüße Oesi
Ich weiß, dass ich nichts weiß... (Sokrates)

Kürzer als meins? ;)
Mit "Liste leer-Schutz" und "Überlaufschutz"?
Dann lass mal sehen!

Erst einmal Danke für die Bereitstellung des Codeschipsels.

Jetzt zu meinen Anliegen. Ich will diese Funktion auch nutzen, aber mit 4 Buttons. Der oberste Button soll den selektierten Wert ans Ende der Tabelle setzen, der 2. und 3.Button um 1 nach oben oder unten und der 4.Button den selektierten Wert an den Anfang.

Das 2. Probleme noch dazu, ich lese diese Werte aus einer Datenbank aus sprich die Anzahl der eingelesenen Werte variert.

Nach der Sortierung soll es dann zurück in die Datenbank.
Ich weiss das dies mit Arrays geht, aber mit denen stehe ich auf Kriegsfuß. :-)

Es währe nett, wenn mir jemand bei diesen Problem helfen könnte.

Danke

Gruß Hacksaw

Hi Hacksaw!

Ich hab' mein Script in Deinem Sinne umgeschrieben. Probier das mal:

---- schnipp -----------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript" language="JavaScript"><!--

function moveItem(updn) {
with (document.formular.pages) {
var iCurr = selectedIndex;
oCurr = options[iCurr];
var oNew = new Option(oCurr.text, oCurr.value, false, true);
var oTmp;

switch (updn) {
case -1 : // Hoch
oTmp = options[(iCurr > 0) ? --iCurr:0];
break;
case 1 : // Runter
oTmp = options[iCurr < length-1 ? ++iCurr:length-1];
break;
case 0 : // Anfang
oTmp = options[iCurr=0];
break;
case 9 : // Ende
oTmp = options[iCurr=length-1];
break;
}
oCurr.text = oTmp.text; oCurr.value = oTmp.value;
oTmp.text = oNew.text; oTmp.value = oNew.value;
focus();
selectedIndex = iCurr;
}
}

//--></script>
</head>

<body>
<form name="formular" method="POST">

<select id="pages" name="pages[]" multiple size="15">
<option value="1">Lorem</option>
<option value="2">Ipsum</option>
<option value="3">Solor</option>
<option value="4">Sit amet</option>
<option value="5">Con sectetuar</option>
<option value="5">Veritas est</option>
</select>
<br>
<a href="javascript:moveItem(-1);">Hoch</a> - <a href="javascript:moveItem(1);">Runter</a>
<a href="javascript:moveItem(0);">Erster</a> - <a href="javascript:moveItem(9);">Letzter</a>

</form>

</body>
</html>

---- schnapp ----------------------------------

Ich brauchte die Funktion, um z. B. die Seiten eines Kapitels manuell umsortieren zu können. Nun kann man leider das Array pages nicht einfach in einer Db ablegen (zumindest nicht in MySQL und ähnlichen).
Ich bin also so vorgegangen:

* $pages = isset($_POST['pages']) ? $_POST['pages'] : '';
liest die Einträge der Listbox in das Array $pages ein.

* Pro Listboxeintrag lege ich einen Datensatz in einer verknüpften Tabelle an. Vor dem Sichern von geänderten Listbox-Einträgen müssen diese zunächst gelöscht werden ( - so ist's zumindest am einfachsten).

* Dann kann pro Listbox-Eintrag wieder ein Record angelegt werden:
if (is_array($pages)) {
if (count($pages) > 0) {
for ($i = 0; $i < count($pages); $i++) {
// Neuen Datensatz anlegen mit dem Inhalt $pages[$i] und den Sichern
// Damit die Sortierfolge erhalten bleibt, muss z. B. ein
// char(4)-Datenfeld angelegt werden, nach dem künftig sortiert
// wird. Dessen Inhalt könnte z. B. so aussehen:
// str_pad(strval($i), 4, '0', STR_PAD_LEFT) );
}

Übrigens: Funktioniert gut so :)

Vielen Dank, für die schnelle Antwort, habe es mal für mich angepasst.

------ htm ---
<html>
<head>
<title>Hacksaws Board | Umfrage-Test | Umfrage bearbeiten</title>
<link rel="stylesheet" href="poll.css" />
</head>

<body>
<form action="poll.php" method="post" name="pform">
<input type="hidden" name="newpages" value="pollsave">
<input type="hidden" name="newpagesnumbers" value="">
<table cellpadding="4" cellspacing="1" border="0" style="width:98%" class="tableinborder">
<tr>
<td class="tabletitle" align="left" colspan="2"><span class="normalfont"><b>Umfrage bearbeiten</b></span></td>
</tr>
<tr align="left">
<td class="tableb"><span class="normalfont"><b>Umfragentitel:</b></span></td>
<td class="tableb"><input type="text" name="question" value="test" class="input" size="50" maxlength="100" /></td>
</tr>
<tr align="left">
<td class="tablea" align="center">

<a href="javascript:moveItem(0);"><img src="polledit_uptop.gif" border="0" alt="An erste Position" title="An erste Position" /></a><br /><br />

<a href="javascript:moveItem(-1);"><img src="polledit_up.gif" border="0" alt="Nach oben" title="Nach oben" /></a><br /><br />


<a href="javascript:moveItem(1);"><img src="polledit_down.gif" border="0" alt="Nach unten" title="Nach unten" /></a><br /><br />


<a href="javascript:moveItem(9);"><img src="polledit_downbottom.gif" border="0" alt="An letzte Position" title="An letzte Position" /></a></td>


<td class="tablea"><select id="pages" name="pages[]" multiple size="20" style="width:500px">

<option name="options[1]" value="1">Hund 1</option>
<option name="options[2]" value="2">Katze 2</option>
<option name="options[3]" value="3">Maus 3</option>
<option name="options[4]" value="4">Lorem 4</option>
<option name="options[5]" value="5">Ipsum 5</option>
<option name="options[6]" value="6">Solor 6</option>
<option name="options[7]" value="7">Sit amet 7</option>
<option name="options[8]" value="8">Con sectetuar 8</option>
<option name="options[9]" value="9">Veritas est 9</option>
</select>

</td>
</tr>
<tr>
<td class="tableb" colspan="2" align="center"><input class="button" type="submit" value="Speichern" onclick="FormSubmit();"></td></tr>
<script type="text/javascript" language="JavaScript">
<!--

var optlist = document.pform.pages;
var option = document.pform.option;

function moveItem(updn) {
with (document.pform.pages) {
var iCurr = selectedIndex;
oCurr = options[iCurr];


var oNew = new Option(oCurr.text, oCurr.value, false, true);
var oTmp;


switch (updn) {
case -1 : // Hoch
oTmp = options[(iCurr > 0) ? --iCurr:0];
break;
case 1 : // Runter
oTmp = options[iCurr < length-1 ? ++iCurr:length-1];
break;
case 0 : // Anfang
oTmp = options[iCurr=0];
break;
case 9 : // Ende
oTmp = options[iCurr=length-1];
break;
}
oCurr.text = oTmp.text; oCurr.value = oTmp.value;
oTmp.text = oNew.text; oTmp.value = oNew.value;
focus();
selectedIndex = iCurr;
}
}
function FormSubmit(actionval) {
for(i=0;i<optlist.length;i++) {
text = optlist.options.text;
document.pform.newpages.value+='|||'+text;
document.pform.newpagesnumbers.value+='|||'+optlist.options.value;
}
document.pform.submit();
}
//-->
</script>
</form>
</table><br />
</body>
</html>
------ ende htm --------
----- php --------

if($action=="savepoll") {

if ($_POST['newpages']) $newpages = $_POST['newpages'];
else $newpages = "";
if ($_POST['newpagesnumbers']) $newpagesnumbers = $_POST['newpagesnumbers'];
else $newpagesnumbers = "";

$optionsstring = $newpages;
$votesstring = $newpagesnumbers;

if (substr($optionsstring,0,3)=="|||") {
$optionsstring=substr($optionsstring,3);
}
if (substr($votesstring,0,3)=="|||") {
$votesstring=substr($votesstring,3);
}

mysql->query("UPDATE poll SET votes='".addslashes($votesstring)."',options='".addslashes($optionsstring)."' WHERE pollid=$pollid");

}

----- ende php -----

da ich die Wert so für die DB brauche

wert1|||wert2|||wert3|||wert4
vote1|||vote2|||vote3|||vote4

zwar habe ich mir die Function wert an den Anfang der Liste oder Wert an das Ende anders vorgestellt, nicht tauschen, sondern nur davor oder dahinter setzen:
Bsp vorher:
1
2
3
4
5
nacher:
5
1
2
3
4

Aber ich habe von JS nicht so den Plan, und kann mit dieser Lösung leben.
Vielen Dank nochmal

Gruß Hacksaw