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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery根据一个值来选中select下的option实例代码

    jquery怎么根据一个值来选中select下的option <script type="text/javascript"> $(document).ready(function(){ var str=""; str = '${conclusionTypeName}'; $("#firstName option").each(function(){ alert($(this).text()); if($(this).text() ==

  • JS更改select内option属性的方法

    本文实例讲述了JS更改select内option属性的方法.分享给大家供大家参考.具体如下: 帮一位友人解决了一个小问题,需求是更改选中选项卡内显示的文本值,新值存放在某个文本框内 初始窗口: <html> <head> <title>原窗口</title> <script> var parentValue=""; //全局变量,用于保存点击详情时select中指定opeion的值 function detail() { va

  • JavaScript实现select添加option

    JavaScript为select添加option <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <script> window.onload = function(){ //创建select控件 var _select = document.createElement("SELECT"

  • js给selected添加options的方法

    本文实例讲述了js给selected添加options的方法.分享给大家供大家参考.具体实现方法如下: <select id="Mmonth"> <option>1</option> </select> <input type="button" onclick="a()" value="添加"/> <script> function a(){ docume

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • JS 通过系统时间限定动态添加 select option的实例代码

    JS 通过系统时间限定动态添加 select option的实例代码

    虽然是个简单的效果,还是需要积累一下,记录一下: 源代码如下所示: <select id="myselect1"> <option value="">- -</option> <option value="2015级">2015级</option> <option value="2014级">2014级</option> <option

  • JavaScript操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

  • js添加select下默认的option的value和text的方法

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;

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

    本文实例讲述了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:

  • JS实现select选中option触发事件操作示例

    本文实例讲述了JS实现select选中option触发事件操作.分享给大家供大家参考,具体如下: 我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. 想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件 又在select中添加onclick 这下可好了,没选option呢就触发了 百度来的说option没有触发事件,需

  • js 操作select与option(示例讲解)

    1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement_x("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option 复制代码 代码如下: function addOption(){

  • js 操作select和option常用代码整理

    1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

  • js操作select控件的几种方法

    1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue&qu

  • 使用js对select动态添加和删除OPTION示例代码

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

  • Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex

  • Angular.JS中select下拉框设置value的方法

    Angular.JS中select下拉框设置value的方法

    前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de

  • js实现select跳转功能代码

    js简单实现select跳转功能:代码如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="selectBox"> <select class="toSlt"> <option href="http://jichuang.gongchang.cn/

随机推荐