js 调整select 位置的函数

更新时间：2008年02月21日 21:29:50 作者：

js 调整select 位置的函数，向上移动，向下移动，移动到最上，移动到最后这里把项目中写过的几个js函数来给大家分享，功能是通过js来实现对select 中的option的位置进行移动，代码如下

//   排序：向上移动
  function   Up()
  ...{
     var   sel=document.getElementById("selectCheck");  //获取select
     var   nIndex   =   sel.selectedIndex;   //需要进行操作的select 项的索引
     var   nLen   =   sel.length;   //select 总共项目数
     if   ((nLen<1)||(nIndex==0))   return;
     if   (nIndex<0)
     ...{
        alert("请选择一个要移动的已选按钮！");
        return;
      }
     var   sValue=sel.options[nIndex].value;
     var   sHTML=sel.options[nIndex].innerHTML;
     sel.options[nIndex].value=sel.options[nIndex-1].value;
     sel.options[nIndex].innerHTML=sel.options[nIndex-1].innerHTML;
     sel.options[nIndex-1].value=sValue;
     sel.options[nIndex-1].innerHTML=sHTML;
     sel.selectedIndex=nIndex-1;
  }
  //   排序：向下移动
  function   Down()
   ...{
     var   sel=document.getElementById("selectCheck");
     var   nIndex   =   sel.selectedIndex;
     var   nLen   =   sel.length;
     if   ((nLen<1)||(nIndex==nLen-1))   return;
     if   (nIndex<0)
     ...{
       alert("请选择一个要移动的已选按钮！");
       return;
     }
     var   sValue=sel.options[nIndex].value;
     var   sHTML=sel.options[nIndex].innerHTML;
     sel.options[nIndex].value=sel.options[nIndex+1].value;
     sel.options[nIndex].innerHTML=sel.options[nIndex+1].innerHTML;
     sel.options[nIndex+1].value=sValue;
     sel.options[nIndex+1].innerHTML=sHTML;
     sel.selectedIndex=nIndex+1;
   }
   //移动到最上
   function UpFirst()
   ...{
      var   sel=document.getElementById("selectCheck");
      var   nIndex   =   sel.selectedIndex;
      var   nLen = sel.options.length;
      if   ((nLen<1)||(nIndex==0))   return;

      if(nIndex<0)
      ...{
          alert("请选择一个要移动的已选按钮！");
          return;
      }
      var tempValue = document.getElementById("tempValue");//用于临时存放option的值
      tempValue.value = "";
      for(var k=0;k<nIndex;k++)
      ...{
         tempValue.value +=  sel.options[k].value+";";
      }
      var arrValue = tempValue.value.split(';');
      var   sValue=sel.options[nIndex].value;
      var   sHTML=sel.options[nIndex].innerHTML;
      sel.options[0].value = sValue;
      sel.options[0].innerHTML = sHTML;

     for(var j=1;j<=nIndex;j++)
     ...{
       sel.options[j].value = arrValue[j-1];
       sel.options[j].innerHTML = arrValue[j-1];
     }
      sel.selectedIndex = 0;
   }
   //移动到最后
   function DownLast()
   ...{
      var   sel=document.getElementById("selectCheck");
      var   nIndex   =   sel.selectedIndex;
      var   nLen = sel.options.length;
      if   ((nLen<1)||(nIndex==nLen))   return;

      if(nIndex<0)
      ...{
          alert("请选择一个要移动的已选按钮！");
          return;
      }
      var tempValue = document.getElementById("tempValue");//用于临时存放option的值
      tempValue.value = "";
      for(var k=nIndex+1;k<nLen;k++)
      ...{
         tempValue.value +=  sel.options[k].text+";";
      }
      var arrValue = tempValue.value.split(';');
      var   sValue=sel.options[nIndex].value;
      var   sHTML=sel.options[nIndex].innerHTML;


     for(var j=nIndex;j<nLen;j++)
     ...{
       sel.options[j].value = arrValue[j-nIndex ];
       sel.options[j].innerHTML = arrValue[j-nIndex];
     }

      sel.options[nLen-1].value = sValue;
      sel.options[nLen-1].innerHTML = sHTML;
      sel.selectedIndex = nLen-1;
   }

js
select

JS实现的论坛Ajax打分效果完整实例
这篇文章主要介绍了JS实现的论坛Ajax打分效果,以完整实例形式分析了JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
2015-10-10
layui的form.on的使用示例详解
这篇文章主要介绍了layui的form.on的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
JSQL 基于客户端的成绩统计实现方法
JSQL应用案例基于客户端的成绩统计，下面我把整个example的代码贴出来，欢迎拍砖
2010-05-05
JS中的数组的sort方法使用示例
sort会调用每一项的toString方法进行比较，下面为大家介绍下JS中数组sort方法的具体使用
2014-01-01
基于原生JS封装的Modal对话框插件的示例代码
这篇文章主要介绍了基于原生JS封装的Modal对话框插件的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
JavaScript Uploadify文件上传实例
这篇文章主要为大家详细介绍了Uploadify文件上传小实例，一个简单的jsp上传小功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
JavaScript中使用webuploader实现上传视频功能(demo)
这篇文章主要介绍了webuploader实现上传视频功能,通过本文给大家介绍了上传视频和上传图片的区别讲解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-04-04
新手快速入门微信小程序组件库 iView Weapp
这篇文章主要介绍了新手快速入门微信小程序组件库 iView Weapp，iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库,需要的朋友可以参考下
2019-06-06
如何使用Javascript获取距今n天前的日期
本篇文章是对使用Javascript获取距今n天前日期的实现代码进行了详细的分析介绍，需要的朋友参考下
2013-07-07
简单了解JavaScript中的new Function
这篇文章主要介绍了简单了解JavaScript中的new Function，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09