首頁 >web前端 >js教程 >JavaScript控制兩個列錶框listbox左右交換資料的方法_javascript技巧

JavaScript控制兩個列錶框listbox左右交換資料的方法_javascript技巧

WBOY原創: 2016-05-16 16:08:381730瀏覽

本文實例講述了JavaScript控制兩個列錶框listbox左右交換資料的方法。分享給大家供大家參考。具體分析如下：

這個功能我們常用到，將左邊列錶框的元素移到右邊，或是將右邊列錶框的元素移到左邊，可以一次全部移動

function listbox_moveacross(sourceID, destID) {

    var src = document.getElementById(sourceID);

    var dest = document.getElementById(destID);

    for(var count=0; count 
        if(src.options[count].selected == true) {

                var option = src.options[count];

                var newOption = document.createElement("option");

                newOption.value = option.value;

                newOption.text = option.text;

                newOption.selected = true;

                try {

                         dest.add(newOption, null); //Standard

                         src.remove(count, null);

                 }catch(error) {

                         dest.add(newOption); // IE only

                         src.remove(count);

                 }

                count--;

        }

    }

}

//..

listbox_moveacross('countryList', 'selectedCountryList');

下面是像是的示範效果程式碼，可以直接在瀏覽器內執行

複製程式碼程式碼如下:

點選下方的按鈕可向右或向左移動所選選項。




        >





函數 listboxMoveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);
    for(var count=0; count         if(src.options[count].selected == true) {
                var option = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                嘗試{
                         dest.add(newOption, null); //標準
                         src.remove(count, null);
                 }catch（錯誤){
                         dest.add(newOption); // 僅限 IE
                         src.remove(count);
                 }
                數--；
        }
    }
}
腳本>

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript透過元素索引號碼刪除陣列中對應元素的方法_javascript技巧下一篇：JavaScript透過元素索引號碼刪除陣列中對應元素的方法_javascript技巧

看更多

JavaScript控制兩個列錶框listbox左右交換資料的方法_javascript技巧

相關文章