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 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Vue事件处理原理及过程详解
Mar 11 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
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
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
使用js显示当前时间示例
2014/03/02 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python网络爬虫采集联想词示例
2014/02/11 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python购物车程序简单代码
2018/04/18 Python
Python中property函数用法实例分析
2018/06/04 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
个人授权委托书范本
2014/04/03 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS