`
tanglong8848
  • 浏览: 72923 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

javascript实现select中option的顺序上下移动

 
阅读更多
function sortUp(obj)//向上移动
  {
   var targetOptions=document.getElementById(obj);//提取操作的对象集合,也就是需要操作的select
   if(targetOptions!=undefined)
   {
    var length=targetOptions.options.length;
    if(length>0){
    
    for(index=0;index<length;index++)
    {
     if(targetOptions.options[index].selected)
     {
      if(index!=0)
      {
       var targetArr=targetOptions.options;//得到当前可操作项的数组
      
       var option=new Option();
       option.id=targetOptions.options[index-1].id;
       option.name=targetOptions.options[index-1].name;
       option.value=targetOptions.options[index-1].value;
       option.text=targetOptions.options[index-1].text; 
       
       targetOptions.options[index-1].id=targetOptions.options[index].id;
       targetOptions.options[index-1].name=targetOptions.options[index].name;
       targetOptions.options[index-1].value=targetOptions.options[index].value;
       targetOptions.options[index-1].text=targetOptions.options[index].text;      
       
       targetOptions.options[index]=option;
       
       targetOptions.options[index-1].selected=true;
       
       //connectID();connectText();
      }
     }
    }
    }else{
    alert("请先添加项!");
   }
   }else{
    alert("请先添加项!");
   }
  }
  
function sortDown(obj){//向下移动
   var targetOptions=document.getElementById(obj);//提取操作的对象集合,也就是需要操作的select
   if(targetOptions!=undefined){
    
    var length=targetOptions.options.length;
   
  if(length>0){
    for(index=0;index<length;index++)
    {
     if(targetOptions.options[index].selected)
     {
      if(index!=length-1)
      {
       var targetArr=targetOptions.options;//得到当前可操作项的数组
      
       var option=new Option();
       option.id=targetOptions.options[index+1].id;
       option.name=targetOptions.options[index+1].name;
       option.value=targetOptions.options[index+1].value;
       option.text=targetOptions.options[index+1].text;
       //option=targetOptions.options[index+1];
       
       targetOptions.options[index+1].id=targetOptions.options[index].id;
       targetOptions.options[index+1].name=targetOptions.options[index].name;
       targetOptions.options[index+1].value=targetOptions.options[index].value;
       targetOptions.options[index+1].text=targetOptions.options[index].text;      
       targetOptions.options[index]=option;
       targetOptions.options[index+1].selected=true;
       break;
      }
     }
    }
    
    }else{
    alert("请先添加项!");
   }
    
   }else{
    alert("请先添加项!");
   }
}

来自:http://blog.csdn.net/duxingke001/article/details/6325436
分享到:
评论

相关推荐

    java Script ,jquery 写的 select 中的option 左右移动,上下移动

    这个项目是关于如何实现一个功能,使得在HTML `&lt;select&gt;` 元素中的 `&lt;option&gt;` 选项能够通过左右、上下移动来改变它们的顺序。这个特性对于创建具有可定制排序的列表非常有用,比如在编辑模式下,用户可以根据自己的...

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

    总的来说,实现`&lt;select&gt;`元素中`&lt;option&gt;`的上下移动是通过JavaScript对DOM操作的一种应用,它涉及到了对`&lt;select&gt;`和`&lt;option&gt;`元素的属性访问、数组操作以及事件监听。这种功能对于创建自定义的下拉列表排序界面...

    JavaScript Select和Option列表元素上下左右移动

    在本文中,我们将探讨如何使用JavaScript实现一个下拉列表中Select和Option元素的上下左右移动功能。 下拉列表是网页表单中常见的一种元素,通常用来提供用户一系列可选择的选项。Select和Option是HTML中用于创建...

    select框上下移动排序

    当需要对这些选项进行动态排序,比如允许用户通过上下移动来调整选项的顺序时,就需要用到“select框上下移动排序”的技术。这个功能在很多应用场景中都很常见,比如任务管理、优先级设置等,它可以提升用户的交互...

    Javascript Select操作大集合

    对于调整Option在Select中的顺序,`fnUp()`函数提供了一个例子,允许用户将选中的Option与其上方的Option交换位置。这通过遍历Select的选项,检查每个选中的Option,然后交换它们的位置来完成。 除了上述基本操作...

    jQuery Select 上移下移

    虽然题目中提到了“JsSelect移动”,但这个术语在标准的JavaScript中并不常见。通常,我们直接使用JavaScript(而不是jQuery)来实现类似的功能。不过,由于jQuery库的广泛使用和便利性,这里推荐使用jQuery实现。...

    jquery 实现的 select 上移、下移、左移、右移功能

    在本文中,我们将深入探讨如何使用 jQuery 来实现 Select 元素中的选项上移、下移、左移和右移功能。这对于需要动态调整选择项顺序的交互式应用非常有用,比如在线表单编辑或者配置工具。让我们逐一解析这个主题。 ...

    键盘操作select下拉框

    按下`Tab`键可以聚焦到`select`元素上,然后使用`上下箭头`键可以在选项之间移动,按下`Enter`键可以选择当前选中的选项。然而,如果需要自定义键盘交互或者在不完全支持键盘导航的环境中,可以通过JavaScript进行...

    JavaScript实现两个select下拉框选项左移右移

    在这个场景中,用于将第一个下拉框的选项顺序反转后再移动到第二个下拉框,以实现"全部向右移"的功能。 10. 在开发类似的小程序时,需要注意对于用户交互的友好性。比如,在移动选项之前进行选择的检查,以及在没有...

    selectList控件 的单选复选移动

    通过学习和理解这些知识点,开发者能够更有效地在自己的项目中实现类似功能,提升应用程序的交互性和用户友好度。如果你正在处理与`selectList`相关的开发任务,阅读和研究这篇文章将大有裨益。

    JavaScript控制listbox列表框的项目上下移动的方法

    为了实现listbox列表框项目上下移动的功能,可以通过编写JavaScript函数来操作DOM中的option元素。这段代码的目的是为listbox列表框提供一个方法,使得选定的选项能够向上或向下移动。 函数listbox_move接受两个...

    js简单实现Select互换数据的方法

    在数据恢复过程中,为了保证选项顺序的一致性,需要一个排序函数`sort_Main`来将移除的option按照原有的顺序重新插入到Select中。该函数通过遍历保存的`Item_org`数组,按照value和text属性对辅助Select中的option...

    JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    该文档主要讲述了使用JavaScript语言来实现对网页中下拉列表框(select元素)进行数据项增加、删除以及上下排序的操作。具体涉及到的技术知识点有: 1. JavaScript操作DOM:包括通过JavaScript创建新的option元素、...

    JS动态的把左边列表添加到右边的实现代码(可上下移动)

    本篇文章将详细讲解如何用JavaScript实现这样的功能,并且支持上下移动已选择的选项。 首先,来看一下HTML部分,它包含了两个`&lt;select&gt;`元素,一个代表左边列表(list1),另一个代表右边列表(list2)。每个`...

    基于JavaScript实现控制下拉列表

    本例中,我们学习了如何利用`ondblclick`事件、`&lt;select&gt;`和`&lt;option&gt;`标签以及JavaScript的DOM操作来实现在两个下拉列表间移动选项的功能。这样的技术在实际的项目中非常实用,比如在进行分类管理或数据筛选时。...

    js实现Select列表各项上移和下移的方法

    本文将详细介绍如何使用 JavaScript 实现 Select 列表中的选项上移和下移功能,这对于动态调整列表顺序,尤其是用户自定义排序的场景十分有用。 首先,我们需要理解 Select 元素在 HTML 中的作用。Select 元素用于...

    Select菜单

    在本文中,我们将深入探讨Select菜单的设计原理、用途以及如何在不同编程环境中实现它。 1. **菜单与Select菜单的基本概念** - **菜单**:在计算机软件中,菜单是一系列可点击的选项,它们排列在一起,提供给用户...

    ListBox实现上移,下移,左移,右移的简单实例

    在这个实例中,我们看到如何使用JavaScript来实现ListBox中选项的动态移动,包括上移、下移、左移和右移的功能。这个功能常用于需要调整列表顺序或者在两个ListBox之间交换项目的场景。 首先,我们来看一下HTML部分...

    js 穿梭框,可以从左边到右边,也可以从右到左,支持多选

    首先,我们需要了解JavaScript的基础,它是Web开发中的客户端脚本语言,用于实现动态交互效果。穿梭框的实现通常基于HTML、CSS和JavaScript的组合。HTML提供结构,CSS负责样式,而JavaScript处理用户交互和逻辑。 ...

Global site tag (gtag.js) - Google Analytics