Перестановка элементов SELECT с помощью JavaScript

Доброго времени суток, уважаемые читатели! Не давно в одном из сайтов пришлось применить навыки программирования на JavaScript. Данный скрипт позволяет производить ручную перестановку элементов в компоненте select, с использованием клавиатуры (клавиш ↑↓).
Первым, что необходимо сделать – это подготовить форму, которая будет содержать необходимые элементы для сортировки.

<form id="sortForm">
<select id="swId" onkeydown="return keyDown(event,getSelElemSort())" name="sw" size="10">
<option selected="selected" value="1">Арбуз</option>
<option value="2">Помидор</option>
<option value="3">Вишня</option>
<option value="4">Слива</option>
<option value="5">Яблоко</option>
<option value="6">Лимон</option>
<option value="7">Абрикос</option>
<option value="8">Груша</option>
<option value="9">Персик</option>
<option value="10">Черешня</option>
</select>
</form>

Обратите внимание, что форма уже приведена с некоторыми вставками JavaScript. Далее я буду подбробно рассказывать о каждой функции.

Что касается алгоритма программирования, то он достаточно прост:
1. Узнать какой элемент компонента select выделен;
2. узнать в каком направлении будет перемещен элемент и в зависимости от этого производить перестановку выделенного элемента с другим, который находится выше или ниже его (в зависимости от нажатой клавиши).

Реализация функции getSelElemSort (), которая отвечает за индекс выделенного элемента option.

function getSelElemSort(){

    /*элемент select*/
    var objSelWindow = document.sortForm.sw;

    /*Проверка, выделен ли элемент в select*/
    if(objSelWindow.selectedIndex != -1){
    /*если выделен, возвращаем его индекс*/
    return objSelWindow.selectedIndex;
    }
}

keyDown () – функция обработки клавиш, позволяет определить какая клавиша была нажата. В данную функцию передается два параметра, первый even – это объект с помощью, которого можно определить номер нажатой клавиши, второй selIndex – индекс выделенного элемента.

За сортировку отвечает функция sortElem (), в качестве параметров принимает selIndex – индекс выделенного элемента, keycode — код нажатой клавиши.

Алгоритм функции заключается в следующем:
— определить какая из двух клавиш была нажата (↑ – код 38, ↓ – код 40);
— в зависимости от нажатой клавиши произвести сортировку (методом трех стаканов).

Для удобной работы были созданы переменные:
objSelWindow – элемент select;
maxSelWindow – кол-во элементов в select;
valueSortElem – значение выделенного элемента;
textSortElem – текст выделенного элемента;
tempValue – временная переменная, которая будет хранить значение переставляемого элемента;
tempText – временная переменная, которая будет хранить текст переставляемого элемента;

С помощью switch определяется код клавиши. При 38, перед изменением элемента необходимо узнать, что предыдущий индекс не равен -1 (порядок в элементе select начинается с 0). Если предыдущий индекс не равен -1 , то производится их перестановка.
При коде 40, так же происходит проверка, только следующего элемента (в данном случае если он меньше 10).

function sortElem(selIndex,keyCode){

var objSelWindow = document.sortForm.sw;
var maxSelWindow = objSelWindow.length;

var valueSortElem = objSelWindow.options[objSelWindow.selectedIndex].value;
var textSortElem = objSelWindow.options[objSelWindow.selectedIndex].text;

var tempValue;
var tempText;

switch(keyCode){

    case 38: {

        if(selIndex-1 != -1){
/*Перестановка значений и текста выделенного элемента и элемента, который размещен выше (selIndex-1) */
            tempValue = objSelWindow.options[selIndex-1].value;
            tempText = objSelWindow.options[selIndex-1].text;
            objSelWindow.options[selIndex-1].value = objSelWindow.options[selIndex].value;
            objSelWindow.options[selIndex-1].text = objSelWindow.options[selIndex].text;
            objSelWindow.options[selIndex].value = tempValue;
            objSelWindow.options[selIndex].text = tempText;
            objSelWindow.options[selIndex].selected();
        }

        break;
            }

    case 40: {
            if(selIndex+1 < 10){
/*Перестановка значений и текста выделенного элемента и элемента, который размещен ниже (selIndex+1) */

            tempValue = objSelWindow.options[selIndex].value;
            tempText = objSelWindow.options[selIndex].text;
            objSelWindow.options[selIndex].value = objSelWindow.options[selIndex+1].value;
            objSelWindow.options[selIndex].text = objSelWindow.options[selIndex+1].text;
            objSelWindow.options[selIndex+1].value = tempValue;
            objSelWindow.options[selIndex+1].text = tempText;
            objSelWindow.options[selIndex].selected();

            }
        break;
    }
    default : {alert("Используйте стрелки вверх/вниз чтобы управлять элементами!");}
}
    return false;
}

P.S. Работу скрипта хорошо заметно, если параллельно просматривать исходный код. Это можно сделать к примеру в Chrome, используя функцию «Просмотр кода элемента».