JavaScript控制listbox列錶框的專案上下移動的方法_javascript技巧

本文實例講述了JavaScript控制listbox列錶框的項目上下移動的方法。分享給大家供大家參考。具體分析如下：

這段JS程式碼可以控制listbox內的元素向上或向下移動，這個功能非常有用。下面是詳細的程式碼

複製程式碼 程式碼如下:

function listbox_move(listID, direction) {
    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;
    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }
    var increment = -1;
    if(direction == 'up')
        increment = -1;
    else
        increment = 1;
    if((selIndex increment)         (selIndex increment) > (listbox.options.length-1)) {
        return;
    }
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex increment].value
    listbox.options[selIndex].text = listbox.options[selIndex increment].text
    listbox.options[selIndex increment].value = selValue;
    listbox.options[selIndex increment].text = selText;
    listbox.selectedIndex = selIndex increment;
}
//..
//..
listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

以下是詳細的示範程式碼，可以在瀏覽器內使用

複製程式碼 程式碼如下:

點選下方的按鈕可選取或取消選取選取框中的所有選項。

   
        印度選項>
        美國選項>
        中國選項>
        義大利選項>
        德國選項>
        加拿大選項>
        法國選項>
        英國選項>
    選擇>

向上移動
往下移動

函數 listboxMove(listID, 方向) {
    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;
    if(-1 == selIndex) {
        alert("請選擇要移動的選項。");
        返回；
    }
    var 增量 = -1;
    if(方向=='向上')
        增量 = -1;
    其他
        增量 = 1;
    if((selIndex 增量)         (selIndex增量)> (listbox.options.length-1)) {
        返回；
    }
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex 增量].value
    listbox.options[selIndex].text = listbox.options[selIndex 增量].text
    listbox.options[selIndex 增量].value = selValue;
    listbox.options[selIndex 增量].text = selText;
    listbox.selectedIndex = selIndex 增量;
}
腳本>

希望本文對大家介紹的javascript程式設計有幫助。