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>