Fortgeschrittene Javascript Frage

[r3pl4y]

Das Problem:

Momentan erstelle ich ein Formular für ein CMS, mit dem man durch Clicks in einer Tabellen Zeile diverse Contents in eine multiple-Selectbox Bringt. Das klappt auch schön.

Nun wollte ich noch zwei Buttons machen, damit man einen selektierten Content (selektierte Option in der Select Box) nach oben oder unten verschieben kann.
Dazu habe ich das untenstehende Javascript geschrieben. Das Script ist noch nicht fertig und ist noch viel zu gross.

Nun endlich das wirkliche Problem: Klick auch mal 3 oder meherere Contents zusammen und verschiebt den untersten nach oben mit dem Button "Up". Wenn Ihr nun nochmals "Up" drückt verschiebt sich das selektierte Element nicht wieder nach oben.
Ich habe allerdings festgestellt das wenn ich das Selektierte Element nochmals mit der Maus selektiere und dann wieder "Up" drücke, es wieder funktioniert.

Hier könnt Ihr es testen:
http://www.schleudertrauma-netz.ch/NSX/multimple.php

Hier der Javascript Code wo was mit dem "selected" falsch sein muss:

function showSelectedItems() {
var f = window.document.forms[0].elements[0];
	for (var i=0; i<f.options.length; i++)
	   if (f.options[i].selected)
		  var Auswahl = i;
		  if(Auswahl != "0") {
		  	var objA = Form_Item_Id[Auswahl];
			var objB = Form_Item_Ti[Auswahl];
			var objX = Form_Item_Id[Auswahl-1];
			var objY = Form_Item_Ti[Auswahl-1];
			Form_Item_Id.splice(Auswahl-1, 2, objA, objX);
			Form_Item_Ti.splice(Auswahl-1, 2, objB, objY);
			
				for(var i=0; i<=Form_Item_Id.length-1; i++)
				{
					f.options[i].text = " - "+Form_Item_Id[i]+"  ->  "+Form_Item_Ti[i];
					f.options[i].value = Form_Item_Id[i];
				}
			f.options[Auswahl-1].selected = true;				

		} else {
			alert("Dieser Content kann nicht weiter nach oben verschoben werden!");
			return false
		}
}

 

[Fabian H]

f.focus()

??

 

[r3pl4y]

das ist ned das problem

 

[Gumbo]

Ersetz mal alle:

  options[i].text = " - "+Form_Item_Id[i]+"  ->  "+Form_Item_Ti[i];
  options[i].value = Form_Item_Id[i];

durch:

  options[i] = new Option(" - "+Form_Item_Id[i]+"  ->  "+Form_Item_Ti[i], Form_Item_Id[i]);

 

[r3pl4y]

Hab ich gemacht. Siehe hier (neue URL): http://www.schleudertrauma-netz.ch/NSX/multimple3.php

Aber wie kann ich nun die einzelnen "options" am besten nach oben oder unten verschieben?

hat jemand ne idee?

Meine Idee war die beiden Arrays "Form_Items_Id" und "Form_Items_Ti" zu benutzen und die inhalte auszutauschen, aber das geht irgendwie ned...

 

[Terrance & Philipp]

@Nuinmundo:
f.focus() bedeutet in diesem Script, das die SelectBox wieder den Focus kriegt. (Angewählt, aktiviert wird.)

@replay:
Sorry hab grad keine Zeit mir das durchzuschauen. Wenn ihr mal Hilfe braucht, ich kann auch PHP, Javascript usw., und komme auch aus der Schweiz.

 

[Gumbo]

Ich hätte eine Antwort, jedoch ohne Form_Items_xx, da ich dies für überflüssig hielt:

function addFormItem(contentId, contentTitle, aORp) {
  sBox = document.forms["contentform"].elements["mselect"];
  if(aORp == "1") {
    alert("Dieser Content ist passiv geschaltet!\nBitte zuerst aktiv schalten...");
    }
  else {
    sBox.options[sBox.options.length] = new Option(" - "+contentId+" -> "+contentTitle,contentId);
    }
  }

function moveItem(dir) {
  sBox = document.forms["contentform"].elements["mselect"];
  sIndex = sBox.options.selectedIndex;
  obj1 = new Array();
  obj2 = new Array();
  if(sBox.options.length > 2) {
    switch(dir) {
      case "up":
        if(sIndex > 0) {
          obj1[0] = sBox.options[sIndex].text;
          obj1[1] = sBox.options[sIndex].value;
          obj2[0] = sBox.options[sIndex-1].text;
          obj2[1] = sBox.options[sIndex-1].value;
          sBox.options[sIndex-1] = new Option(obj1[0], obj1[1]);
          sBox.options[sIndex] = new Option(obj2[0], obj2[1]);
          sBox.options[sIndex-1].selected = true;
          }
      break
      case "down":
        if((sBox.options.length - sIndex) > 1) {
          obj1[0] = sBox.options[sIndex+1].text;
          obj1[1] = sBox.options[sIndex+1].value;
          obj2[0] = sBox.options[sIndex].text;
          obj2[1] = sBox.options[sIndex].value;
          sBox.options[sIndex] = new Option(obj1[0], obj1[1]);
          sBox.options[sIndex+1] = new Option(obj2[0], obj2[1]);
          sBox.options[sIndex+1].selected = true;
          }
      break
      }
    }
  }

Wobei du per moveItem('up') bzw down die Richtung bestimmen kannst.

Um Optionen zu löschen kannst du dies nehmen:

function deleteItem() {
  sBox = document.forms["contentform"].elements["mselect"];
  sIndex = sBox.options.selectedIndex;
  sBox.options[sIndex] = null;
  }

 

[r3pl4y]

Vielen Dank Gumbo!
It works!!

Die Lösung ist sehr gut und sauber.
Vielen dank nochmals für die Mühe.



@T&P: Danke für's Angebot

 

[Gumbo]

Zeig mal nachher was du draus gemacht hast.

 

[r3pl4y]

ja klar mach ich.

schick dir dann einen link