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>