JavaScript Select和Option列表元素上下左右移动

更新时间：2008年12月26日 23:08:24 作者：

支持一次选中多项在左右列表中来回移动

作者马嘉楠

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="majianan"> <script language="javascript" > var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index = currentSel.selectedIndex; if(direction){//up if(index==0) return; var value = currentSel.options[index-1].value; var text = currentSel.options[index-1].text; currentSel.options[index-1].value = currentSel.options[index].value; currentSel.options[index-1].text = currentSel.options[index].text; currentSel.options[index].value = value; currentSel.options[index].text = text; currentSel.options[index].selected = false; currentSel.options[index-1].selected = true; }else{//down if(index==(currentSel.length-1)) return; var value = currentSel.options[index+1].value; var text = currentSel.options[index+1].text; currentSel.options[index+1].value = currentSel.options[index].value; currentSel.options[index+1].text = currentSel.options[index].text; currentSel.options[index].value = value; currentSel.options[index].text = text; currentSel.options[index].selected = false; currentSel.options[index+1].selected = true; } } function moveRight(src,des){ if(src.selectedIndex==-1){ alert("Please select first!"); return; } for(var i=0;i<src.length;i++){ if(src[i].selected){ var op = document.createElement("option"); op.value = src.options[src.selectedIndex].value; op.text = src.options[src.selectedIndex].text; des.options.add(op); src.remove(i); i--; } } } function setButton(obj){ if(obj.length==0) return; currentSel = obj; if(obj.id=="leftSel"){ document.getElementById("btnLeft").disabled = true; document.getElementById("btnRight").disabled = false; reSelect(document.getElementById("rightSel")); }else{ document.getElementById("btnLeft").disabled = false; document.getElementById("btnRight").disabled = true; reSelect(document.getElementById("leftSel")); } } function reSelect(obj){ for(var i=0; i<obj.length; i++){ if(obj[i].selected) obj[i].selected = false; } } </script> </HEAD> <BODY> <form id="form1"> <table width="40%" align="center"> <tr> <td> <input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/>  <input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" /> </td> <td> <select multiple id="leftSel" onclick="setButton(this)" style="height:200px;width:100px;"> <option value="1">Java</option> <option value="2">JavaScript</option> <option value="3">C++</option> <option value="4">HTML</option> </select> </td> <td> <input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" />  <input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" /> </td> <td> <select multiple id="rightSel" onclick="setButton(this)" style="height:200px;width:100px;" > <option value="5">CSS</option> <option value="6">.Net</option> </select> </td> </tr> </table> </form> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery表单验证使用插件formValidator
jquery表单验证使用插件formValidator，可供有需求的朋友参考
2012-11-11
鼠标放在放在输入框上面提示效果
鼠标放在放在输入框上面提示效果...
2006-12-12
判断file框选择的是否为图片
判断file框选择的是否为图片...
2006-08-08
带Checkbox的列表框
带Checkbox的列表框...
2006-08-08
js获取变量
js获取变量...
2006-08-08
限制复选框的最大可选数
限制复选框的最大可选数...
2006-07-07
js select 控制实现代码
用js控制select的一些比较不错的功能。
2009-04-04
textarea保留换行的注意事项
textarea保留换行的注意事项...
2007-08-08
通过下拉框的值来确定输入框是否可以为空的代码
本节只是为了做一个记载，实现一个简单的验证是否需要预占下来框有是和否两个值，当选择“是”时，资源预占原因输入框必须输入值，否则不能跳转，当选“否”时，不需要验证资源预占原因输入框
2011-10-10
显示、隐藏密码
显示、隐藏密码...
2006-07-07

JavaScript Select和Option列表元素上下左右移动

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具