1. 程式人生 > >js中前臺資料左右切換移動

js中前臺資料左右切換移動

左右移動或者上下移動都一樣,核心思想就是左邊物件獲取右邊的id

<script type="text/javascript">

// 先註冊整個檔案載入完成之後的事件

window.onload = function() {

//通過id屬性值獲取add標籤物件

var addButton = document.getElementById("add");

// 動態給這個addButton新增單擊事件

addButton.onclick = function() {

// 通過id屬性查詢到first的select下拉列表物件(左邊的下拉列表)

var firstSelect = document.getElementById("first"

);

// 測試下拉列表中的options的長度

//alert(firstSelect.options.length);

// 通過id屬性查詢到second的select下拉列表物件(右邊的下拉列表)

var secondSelect = document.getElementById("second");

//把左邊下拉列表中選中的option新增到右邊的select下拉列表中

// selectObj.selectedIndex是下拉列表中被選中的索引

secondSelect.appendChild( firstSelect.options[firstSelect.selectedIndex] );

}

// 通過ID屬性值獲取全部移到右邊的按鈕物件

var add_allButton = document.getElementById("add_all");

// 動態給這個add_allButton新增單擊事件

add_allButton.onclick = function() {

// 通過id屬性查詢到first的select下拉列表物件(左邊的下拉列表)

var firstSelect = document.getElementById("first");

// 通過id屬性查詢到second的select下拉列表物件(右邊的下拉列表)

var secondSelect = document.getElementById("second"

);

// 通過遍歷把左邊的每一個options物件新增到右邊的select下拉列表中

for (var i = 0; i < firstSelect.options.length;) {

secondSelect.appendChild( firstSelect.options[i] );

}

}

//

var removeButton = document.getElementById("remove");

removeButton.onclick = function() {

// 通過id屬性查詢到first的select下拉列表物件(左邊的下拉列表)

var firstSelect = document.getElementById("first");

// 通過id屬性查詢到second的select下拉列表物件(右邊的下拉列表)

var secondSelect = document.getElementById("second");

//把左邊下拉列表中選中的option新增到右邊的select下拉列表中

// selectObj.selectedIndex是下拉列表中被選中的索引

firstSelect.appendChild( secondSelect.options[secondSelect.selectedIndex] );

}

var remove_allButton = document.getElementById("remove_all");

remove_allButton.onclick = function() {

// 通過id屬性查詢到first的select下拉列表物件(左邊的下拉列表)

var firstSelect = document.getElementById("first");

// 通過id屬性查詢到second的select下拉列表物件(右邊的下拉列表)

var secondSelect = document.getElementById("second");

// 通過遍歷把左邊的每一個options物件新增到右邊的select下拉列表中

for (var i = 0; i < secondSelect.options.length;) {

firstSelect.appendChild( secondSelect.options[i] );

}

}

}

</script>