用js实现两个select下拉框之间的元素互相移动
今天闲着没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。
<script type="text/javascript">/**选中的元素向右移动**/ function moveRight(){//得到第一个select对象var selectElement = document.getElementById("first");var optionElements = selectElement.getElementsByTagName("option");var len = optionElements.length;if(!(selectElement.selectedIndex==-1)) //如果没有选择元素，那么selectedIndex就为-1{//得到第二个select对象var selectElement2 = document.getElementById("secend");// 向右移动for(var i=0;i<len ;i++){selectElement2.appendChild(optionElements[selectElement.selectedIndex]);}} else{alert("您还没有选择需要移动的元素！");}}//移动所有的到右边function moveAll(){//得到第一个select对象var selectElement = document.getElementById("first");var optionElements = selectElement.getElementsByTagName("option");var len = optionElements.length;//alert(len);//将第一个selected中的数组翻转var firstOption = new Array();for(var k=len-1;k>=0;k--){firstOption.push(optionElements[k]);}var lens = firstOption.length;//得到第二个select对象var selectElement2 = document.getElementById("secend");for(var j=lens-1;j>=0;j--){selectElement2.appendChild(firstOption[j]);}}//移动选中的元素到左边function moveLeft(){//首先得到第二个select对象var selectElement = document.getElementById("secend");var optionElement = selectElement.getElementsByTagName("option");var len = optionElement.length;//再次得到第一个元素if(!(selectElement.selectedIndex==-1)){var firstSelectElement = document.getElementById("first");for(i=0;i<len;i++){firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被选中的那个元素的索引}}else{alert("您还没有选中要移动的项目!");}}//全部向左移function moveAllLeft(){var selectElement = document.getElementById("secend");var optionElements = document.getElementsByTagName("option");var len = optionElements.length;var optionEls = new Array();for(var i=len-1;i>=0;i--){optionEls.push(optionElements[i]);}var lens = optionEls.length;var firstSelectElement = document.getElementById("first");for(var j=lens-1;j>=0;j--){firstSelectElement.appendChild(optionEls[j]);}}</script><!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><style type="text/css">.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}.select_move_1 { float:left;}.select_move_2 { float:left;}.select_move_3 { float:left;}</style></head><body><div size="10" id="first" multiple="multiple"> <option value="宝马">宝马</option> <option value="丰田">丰田</option> <option value="奥迪">奥迪</option> <option value="凯迪拉克">凯迪拉克</option> <option value="现代">现代</option> <option value="奔驰">奔驰</option> <option value="法拉利">法拉利</option> </select> </div> <div value="------>" onclick="moveRight()"/><br /> <input type="button" value="===>" onclick="moveAll()" /><br /> <input type="button" value="<------" onclick="moveLeft()"/><br /> <input type="button" value="<===" onclick="moveAllLeft()"/> </div> <div id="secend" multiple="multiple"> </select> </div> </div> </body></html>