测试工具:IE FireFox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Select Demo </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <style> center { font-size:12px; color:red; font-weight:bold; } select { font-size:12px; color:green; } </style> <BODY> <span id='feedback'></span> <form method="post" name="myform"> <table border="0" width="400"> <tr> <td><CENTER>可选择排序方式</CENTER></td> <td> </td> <td><CENTER>已选择排序方式</CENTER></td> </tr> <tr> <td width="40%"> <select multiple name="left" id="left" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))"> <option value="20">测试数据一</option> <option value="30">测试数据二</option> <option value="40">测试数据三</option> <option value="50">测试数据四</option> <option value="60">测试数据五</option> <option value="70">测试数据六</option> <option value="80">测试数据七</option> <option value="90">测试数据八</option> </select> </td> <td width="20%" align="center"> <input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br> <input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> </td> <td width="40%"> <select multiple name="right" id="right" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> </select> </td> </tr> <tr> <td colspan="3"> <CENTER> <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));"> <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));"> <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));"> <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));"> </CENTER></td> </tr> </table> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- //上移 function moveUp(obj) { for(var i=1; i < obj.length; i++) {//最上面的一个不需要移动,所以直接从i=1开始 if(obj.options[i].selected) { if(!obj.options.item(i-1).selected) { var selText = obj.options[i].text; var selValue = obj.options[i].value; obj.options[i].text = obj.options[i-1].text; obj.options[i].value = obj.options[i-1].value; obj.options[i].selected = false; obj.options[i-1].text = selText; obj.options[i-1].value = selValue; obj.options[i-1].selected=true; } } } } //下移 function moveDown(obj) { for(var i = obj.length -2 ; i >= 0; i--) {//向下移动,最后一个不需要处理,所以直接从倒数第二个开始 if(obj.options[i].selected) { if(!obj.options[i+1].selected) { var selText = obj.options[i].text; var selValue = obj.options[i].value; obj.options[i].text = obj.options[i+1].text; obj.options[i].value = obj.options[i+1].value; obj.options[i].selected = false; obj.options[i+1].text = selText; obj.options[i+1].value = selValue; obj.options[i+1].selected=true; } } } } //移动 function moveOption(obj1, obj2) { for(var i = obj1.options.length - 1 ; i >= 0 ; i--) { if(obj1.options[i].selected) { var opt = new Option(obj1.options[i].text,obj1.options[i].value); opt.selected = true; obj2.options.add(opt); obj1.remove(i); } } } //置顶 function moveTop(obj) { var opts = []; for(var i =obj.options.length -1 ; i >= 0; i--) { if(obj.options[i].selected) { opts.push(obj.options[i]); obj.remove(i); } } var index = 0 ; for(var t = opts.length-1 ; t>=0 ; t--) { var opt = new Option(opts[t].text,opts[t].value); opt.selected = true; obj.options.add(opt, index++); } } //置底 function moveBottom(obj) { var opts = []; for(var i =obj.options.length -1 ; i >= 0; i--) { if(obj.options[i].selected) { opts.push(obj.options[i]); obj.remove(i); } } for(var t = opts.length-1 ; t>=0 ; t--) { var opt = new Option(opts[t].text,opts[t].value); opt.selected = true; obj.options.add(opt); } } //--> </SCRIPT>
相关推荐
前言 我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例... // 上移 $sc
使用JavaScript模拟select
用css样式和JavaScript做成的呼吸灯效果的置顶和置底,并形成了动画的效果哦,已经定位到了页面的最右边,自己可以根据自己喜欢的位置进行设置
主要介绍了js实现Select列表各项上移和下移的方法,涉及javascript动态操作页面元素属性值的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
对select的详细操作 1判断是否选中 2对属性的增删改成 3分类源码
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等
如资源名,使用JAVASCRIPT动态创建一个Select元素和text元素
JavaScript操作select JavaScript操作table
网页置顶
JavaScript Json Create、Select、Delete、Update
范例使用SuperMap iClient 6R for JavaScript开发模式,使用MousePosition控件实现鼠标移动到地图上展示实际的地理坐标。
主要介绍了JS实现的表格操作类,可实现针对表格的添加,删除,排序,上移,下移等操作,具有一定参考借鉴价值,需要的朋友可以参考下
[JavaScript]Javascript 设置与读取Co 三级select列表。
NULL 博文链接:https://jsjxqjy.iteye.com/blog/435032
JavaScript实现鼠标移入图片放大效果,JavaScript实现鼠标移入图片放大效果,好东西大家共享
javascript 操作表单select的常用步骤,删除,添加,修改 用代码实现,一看就明白理解用法
javascript实现网页中表格行的选中自动下移特效
一直没怎么很正式的学习过javascript,偶尔用到的时候就到网上找些代码,改吧改吧就用了,这次从头开始学起,细细看下来,还真是有不少收获,甚至有点喜欢上javascript了。 现在步入正题,看到书中讲Form元素的操作...
JavaScript 多级联动select
Javascript操作Select和Option 一个网页 挺全的