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 相关文章推荐
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
Paypal支付不完全指北
Jun 04 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php中关于换行的实例写法
2019/09/26 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python网络编程 Python套接字编程
2017/09/13 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python 输出所有大小写字母的方法
2019/01/02 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
详解python的super()的作用和原理
2020/10/29 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
捷科时代的软件测试笔试题
2015/11/09 面试题
高三自我评价
2014/02/01 职场文书
初中学生期末评语
2014/04/24 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
自查自纠工作总结
2014/10/15 职场文书
计算机实训报告范文
2014/11/05 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
学校团代会开幕词
2016/03/04 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
导游词之昭君岛
2020/01/17 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python