Netzpiraten

Als ich auf einem Webinterface die Optionen einer SELECT-Box mittels JavaScript umsortieren musste, dachte ich es gibt im Internet sowieso tausend gute Implementierungen - wieso also selber eine entwicklen? Nach kurzer Zeit wurde ich auch schon auf diversen Seiten fündig, jedoch genügte keines dieser Scripts meinen Anforderungen. Ich benötigte nähmlich eine Version, die mehrere Optionen zusammen um mehrere Positionen verschiebt, und nicht nur um eine Position rauf und runter.

Damit beim Verschieben die Optionen nicht aus der SELECT-Box raus fliegen, musste zuerst eine Funktion zur Überprüfung und Korrektur der Schrittanzahl her:

function checkMoveCount(obj, moveCount) {
   if (moveCount == 0) return;
   if (moveCount > 0) {
      for (var index=obj.options.length-1; index>0; index--) {
         if (obj.options[index].selected) {
            var maxMove = obj.options.length - index - 1;
            if (maxMove < moveCount) {
               moveCount = maxMove;
            }
            break;
            }
         }
      } else {
         for (var index=0; index<obj.options.length-1; index++) {
            if (obj.options[index].selected) {
            var maxMove = index * -1;
               if (maxMove > moveCount) {
                  moveCount = maxMove;
               }
               break;
               }
            }
         }
   return moveCount;
}

Nun kann also die Hauptfunktion für die Umsortierung implementiert werden:

function move(id, moveCount) {
   var obj = document.getElementById(id);
   moveCount = checkMoveCount(obj, moveCount);
   if (moveCount == 0) return;
   if (moveCount > 0) {
      for (var index=obj.options.length-1; index>=0; index--) {
         if (obj.options[index].selected) {
            var toOption = index+moveCount;
            for (var from=index; from<toOption;from++) {
               swapOptions(obj, from, from+1);
            }
         }
      }
   } else {
      for (var index=0; index<=obj.options.length-1; index++) {
         if (obj.options[index].selected) {
            var toOption = index+moveCount;
            for (var from=index; from>toOption; from--) {
               swapOptions(obj, from, from-1);
            }
         }
      }
   }
}

Diese Funktion benötige eine kleine Hilfsfunktion, die das tatsächliche kopieren der Optionen übernimmt:

function swapOptions(obj, from, to) {
   var theOptions = obj.options;
   var isFromSelected = theOptions[from].selected;
   var isToSelected = theOptions[to].selected;
   var tempFrom = new Option(theOptions[from].text, theOptions[from].value,
                             theOptions[from].defaultSelected, theOptions[from].selected);
   var tempTo= new Option(theOptions[to].text, theOptions[to].value,
                          theOptions[to].defaultSelected, theOptions[to].selected);
   theOptions[from] = tempTo;
   theOptions[to] = tempFrom;
   theOptions[from].selected = isToSelected;
   theOptions[to].selected = isFromSelected;
}

Nun können mehrfache Optionen um beliebige Schritte nach oben bzw. unter verschoben werden. Unschön ist, dass die Verarbeitung der Verschiebung nach unter bzw. oben sehr separat gehandhabt werden. Die implementationen sind ähnlich aber halt doch nicht gleich. Eine Variante wäre, die Funktion move() in zweit Funktionen aufzusplitten: moveUp() und moveDown(). Es währe wahscheinlich auch möglich, mit ein paar Tricks beide Varianten in der gleichen Schlaufe abzuarbeiten, ich denke aber dieser Code würde man dann selber in zwei Wochen nicht mehr verstehen.

Das Resultat kann auf der Selectbox Beispiel angeschaut werden.

Lesezeichen