脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现Select的option上下移动

JS实现Select的option上下移动的方法

 更新时间：2016年03月01日 11:49:22   作者：yenange  
这篇文章主要介绍了JS实现Select的option上下移动的方法,涉及JavaScript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 新手快速学习JavaScript免费教程资源汇总

    新手快速学习JavaScript免费教程资源汇总

    这篇文章主要介绍了新手快速学习JavaScript免费教程资源汇总，都是非常不错的学习站点，有需要的小伙伴可以参考下。
    2015-06-06
  • Axios常见配置选项跨域详解

    Axios常见配置选项跨域详解

    axios基于http客户端的promise，面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持，这篇文章主要介绍了axios常见配置选项 跨域,需要的朋友可以参考下
    2022-11-11
  • JavaScript 开发规范要求(图文并茂)

    JavaScript 开发规范要求(图文并茂)

    作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。
    2010-06-06
  • 浅谈JavaScript正则表达式分组匹配

    浅谈JavaScript正则表达式分组匹配

    一个正则表达式要如何书写才能同时匹配这两个数字呢？简单的字符表达式当然无法完成了，这个时候我们就可以定义一个字符集合（字符类）来进行匹配。这就是分组匹配了
    2015-04-04
  • javascript生成不重复的随机数

    javascript生成不重复的随机数

    这篇文章主要介绍了javascript在指定范围内生成不重复的随机数的方法和相关实例，有需要的小伙伴可以参考下。
    2015-07-07
  • javascript控制swfObject应用介绍

    javascript控制swfObject应用介绍

    本文将详细介绍js控制swfObject的实现方法，需要了解的朋友可以参考下
    2012-11-11
  • 游览器中javascript的执行过程(图文)

    游览器中javascript的执行过程(图文)

    在讲这个问题之前，先来补充几个知识点，如果对此已经比较了解可以直接跳过
    2012-05-05
  • 利用js实现遮罩以及弹出可移动登录窗口

    利用js实现遮罩以及弹出可移动登录窗口

    本篇文章是对使用js实现遮罩以及弹出可移动登录窗口的实现方法进行了详细的分析介绍，需要的朋友参考下
    2013-07-07
  • javascript 拖放效果实现代码

    javascript 拖放效果实现代码

    JavaScript擅长于修改页面中的DOM元素，但是我们使用JavaScript通常只是实现一些简单功能，例如实现图片的翻转，网页中的标签页，等等。这篇文章将向你展示如何在页面中，对创建的元素实现拖放。
    2010-01-01
  • 史上最为详细的javascript继承（推荐）

    史上最为详细的javascript继承（推荐）

    这篇文章主要介绍了javascript继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论