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 处理 URL 的两个函数代码
Aug 13 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
小程序自定义日历效果
Dec 29 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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 QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
详解python算法之冒泡排序
2019/03/05 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
毕业生自我推荐
2013/11/04 职场文书
影视制作岗位职责
2013/12/04 职场文书
音乐器材管理制度
2014/01/31 职场文书
西式结婚主持词
2014/03/14 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Python预测分词的实现
2021/06/18 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技