JS实现Select的option上下移动的方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Down
 var obj = document.getElementById(selectId);
 var len = obj.length;
 var index = obj.selectedIndex;
 //如果:1.没有选中的项; 2.向上,但已是最上; 3.向下,但是最下,不作处理
 if ( (index == -1) || (direct == -1 && index == 0) || (direct == 1 && index >= len - 1) )
  return;
 var swapIndex = index + direct;
 var tempOptions = new Array();
 for (var i = 0; i < len; i++){
  tempOptions[tempOptions.length] = obj.options[i == index?swapIndex:(i == swapIndex?index:i)];
 }
 obj.options.length = 0;
 for (var i = 0; i < len; i++)
  obj.options.add(tempOptions[i]);
}
function UpOrDown2(direct, selectId) {//direct : 1:Up, 0:Down
 var obj = document.getElementById(selectId);
 var len = obj.length;
 var index = obj.selectedIndex;
 //如果:1.没有选中的项; 2.向上,但已是最上; 3.向下,但是最下,不作处理
 if( (index == -1) || (direct == 1 && index == 0) || (direct == 0 && index >= len - 1) )
  return;
 var tempOptions = new Array();
 //如是向上,得到自己上一个到最后的option数组;如是向下,得到自己到最后一个的option数组
 for (var i = index - direct; i < len; i++)
  tempOptions[tempOptions.length] = obj.options[i];
 //去除刚才取得的部分
 obj.options.length = index - direct;
 //颠倒取两个option
 obj.options.add(tempOptions[1]);
 obj.options.add(tempOptions[0]);
 //将余下的option全部加进来
 for (var i = 2; i < tempOptions.length; i++)
  obj.options.add(tempOptions[i]);
}
</script>
</head>
<body>
 <table>
  <tr>
   <td>
    <select id="Select1" size="100" style="width:100px;height:200px;">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
    </select>
   </td>
   <td>
    <img id="imgUp" alt="Up" onclick="UpOrDown(-1,'Select1')" style="cursor:pointer;" /><br />
    <img id="imgDown" alt="Down" onclick="UpOrDown(1,'Select1')" style="cursor:pointer;" />
   </td>
   <td>
    <img id="img1" alt="Up2" onclick="UpOrDown2(1,'Select1')" style="cursor:pointer;" /><br />
    <img id="img2" alt="Down2" onclick="UpOrDown2(0,'Select1')" style="cursor:pointer;" />
   </td>
  </tr>
 </table>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
angular2使用简单介绍
Mar 01 #Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 #Javascript
Bootstrap每天必学之导航条(二)
Mar 01 #Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 #Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 #Javascript
JS实现图片平面旋转的方法
Mar 01 #Javascript
JS显示日历和天气的方法
Mar 01 #Javascript
You might like
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
chrome原生方法之数组
2011/11/30 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
什么是测试驱动开发(TDD)
2012/02/15 面试题
电大物流学生的自我评价
2013/10/25 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
环保倡议书怎么写
2014/05/16 职场文书
汽车专业求职信
2014/06/05 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
重温入党誓词主持词
2015/06/29 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
python 使用pandas读取csv文件的方法
2022/12/24 Python