js select 左右移
来源：互联网 发布：淘宝直播如何找商家 编辑：程序博客网 时间：2024/04/29 15:47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div style="border:1px dashed #CCC; margin:150 0 0 450; width:350; height:200; background-color:#CCC;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15 0 0 15"> <tr> <td> <select name="first" size="10" id="first" multiple="multiple"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项7">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" value="-->" /> <input name="add_all" id="add_all" type="button" value="==>" /> <input name="remove" id="remove" type="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" value="<==" /> </td> <td><select name="second" size="10" id="second" multiple="multiple"> <option value="选项9">选项9</option> </select></td> </tr></table></div></body><script language="javascript">window.onload = function() {//右移document.getElementById("add").onclick = function() {var firstElement = document.getElementById("first");var optionElements = firstElement.getElementsByTagName("option");var len = optionElements.length;var secondElement = document.getElementById("second");for ( var i = 0; i < len; i++) {var optionElement = optionElements[i];if(firstElement.selectedIndex!=-1){secondElement.appendChild(optionElements[firstElement.selectedIndex]);}}}//全右移document.getElementById("add_all").onclick = function() {var firstElement = document.getElementById("first");var optionElements = firstElement.getElementsByTagName("option");var len = optionElements.length;var secondElement = document.getElementById("second");for ( var i = 0; i < len; i++) {var optionElement = optionElements[i];secondElement.appendChild(optionElements[0]);}}/**document.getElementById("add_all").onclick = function() {var firstElement = document.getElementById("first");var len = firstElement.length;var secondElement = document.getElementById("second");for ( var i = 0; i < len; i++) {secondElement.appendChild(firstElement[0]);}}*///双击document.getElementById("first").ondblclick = function() {var firstElement = document.getElementById("first");var optionElements = firstElement.getElementsByTagName("option");var len = optionElements.length;var secondElement = document.getElementById("second");for ( var i = 0; i < len; i++) {var optionElement = optionElements[i];secondElement.appendChild(optionElements[firstElement.selectedIndex]);}}/**document.getElementById("first").ondblclick = function() {var secondElement = document.getElementById("second");secondElement.appendChild(this[this.selectedIndex]);}*///左移document.getElementById("remove").onclick = function() {var secondElement = document.getElementById("second");var optionElements = secondElement.getElementsByTagName("option");var len = optionElements.length;var firstElement = document.getElementById("first");for ( var i = 0; i < len; i++) {var optionElement = optionElements[i];if(secondElement.selectedIndex!=-1){firstElement.appendChild(optionElements[secondElement.selectedIndex]);}}}//左全移document.getElementById("remove_all").onclick = function() {var secondElement = document.getElementById("second");var optionElements = secondElement.getElementsByTagName("option");var len = optionElements.length;var firstElement = document.getElementById("first");for ( var i = 0; i < len; i++) {var optionElement = optionElements[i];firstElement.appendChild(optionElements[0]);}}//双击document.getElementById("second").ondblclick = function() {var firstElement = document.getElementById("first");var secondElement = document.getElementById("second");var optionElements = secondElement.getElementsByTagName("option");var len = optionElements.length;for ( var i = 0; i < len; i++) {var optionElement = optionElements[i];firstElement.appendChild(optionElements[secondElement.selectedIndex]);}}}</script></html>
