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 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
js常用DOM方法详解
Feb 04 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 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
ASP知识讲座四
2006/10/09 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
Python translator使用实例
2008/09/06 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
团日活动总结书
2014/05/08 职场文书
工会趣味活动方案
2014/08/18 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年班组工作总结
2015/04/20 职场文书
学校计划生育责任书
2015/05/09 职场文书
调解书格式范本
2015/05/20 职场文书