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获得服务器端控件的ID的实现代码
Dec 28 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
浅谈JS的原型和原型链
Jun 04 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
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
实用的Vue开发技巧
2019/05/30 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python的多态性实例分析
2015/07/07 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python断言assert的用法代码解析
2018/02/03 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
高考考python编程是真的吗
2020/07/20 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
李敖北大演讲稿
2014/05/24 职场文书
护林防火标语
2014/06/27 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android