`

javascript操作html中select的上下移动

阅读更多


手写getSelectItem、getSelectItemIndex方法
 

function setToFirst(list){          
        var obj=getSelectItem(list);     
        var index=getSelectItemIndex(list);
        if(index==0){return;}
        list.add(new Option(obj.innerText,obj.value),0);
        list.remove(list.length-1);                             
               
        list.selectedIndex=0;
  }
 
  function setToLast(list){
        var obj=getSelectItem(list);     
        var index=getSelectItemIndex(list);
        if(index==list.length-1){return;}                                     
        list.add(new Option(obj.innerText,obj.value),list.length);       
        list.remove(getSelectItemIndex(list));
        list.selectedIndex=list.length-1;
  }
 
  function setToUp(list){
        var index=getSelectItemIndex(list);
        var obj=getSelectItem(list);   
        if(index>0){
            list.add(new Option(obj.innerText,obj.value),index-1);
            list.remove(index+1);
            list.selectedIndex=index-1;
        }
  }
 
  function setToDown(list){
        var index=getSelectItemIndex(list);
        var obj=getSelectItem(list);   
        if(index<list.length-1){
            list.add(new Option(obj.innerText,obj.value),index+2);
            list.remove(index);
            list.selectedIndex=index+1;
        }
  }

 

其实实现这些使用jQuery是相当简单的,以前自己会写这么去写

  • 大小: 14.1 KB
分享到:
评论

相关推荐

    select框上下移动排序

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

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

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

    Javascript Select操作大集合

    JavaScript中的Select对象是HTML表单元素Select的编程接口,它提供了对下拉列表的操作功能。在Web开发中,Select元素通常用于创建用户可以选择的多个选项。以下是对标题和描述中涉及的知识点的详细说明: 1. **动态...

    JQuery实现select互换数据和上下移动

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能,即在两个...

    js控制 select表单子节点左右上下移动

    这篇博客“js控制 select表单子节点左右上下移动”提供了一个解决方案,它可能包含了一个名为`optionSelect.js`的脚本文件,用于实现这个功能。 首先,我们需要理解`select`元素和它的`option`子元素。在HTML中,`...

    键盘操作select下拉框

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

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

    为了实现上下移动功能,我们需要使用 JavaScript 来操作 Select 元素。我们可以创建一个函数 moveUp,用于将当前选中的 Option 元素上移一位。这个函数将当前选中的 Option 元素与其上一项进行交换,从而实现上移...

    jQuery Select 上移下移

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

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

    在这个教程中,我们将探讨如何使用JavaScript实现对HTML select元素中option项进行上下移动的功能。 首先,要实现select中的option上下移动,我们需要理解select和option元素的DOM接口。select元素通过options属性...

    .net页面实现表格上下左右移动光标

    以上就是一个简单的JavaScript实现,允许用户在.NET页面的HTML表格中通过键盘上下左右移动光标并同时选择文本。这个功能对于数据输入或编辑场景特别有用,用户可以通过键盘高效地导航和操作表格内容。在实际项目中,...

    jQuery实现列表上下移动置顶+带入数据库文件

    在本项目中,我们主要探讨如何使用jQuery来实现列表元素的上下移动以及置顶功能,并将这些操作同步到数据库中。这个项目对于初学者来说是一个很好的实践案例,因为它的代码结构简洁,步骤清晰,关键部分都有注释。...

    下拉框上下移动

    下拉框上下移动这个话题主要涉及用户交互、前端开发技术,特别是JavaScript、CSS以及HTML5的相关知识。接下来,我们将深入探讨这个主题。 一、下拉框的基本结构 在HTML中,下拉框通常由`&lt;select&gt;`标签定义,每个可...

    js实现左右2个下拉选择框,左右上下移动功能

    在JavaScript编程中,创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项,比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释: ...

    JS实现左边的下拉框内容移动到右边下拉框,支持内容上下移动

    标题中的“JS实现左边的下拉框内容移动到右边下拉框,支持内容上下移动”是一个常见的前端交互功能,常用于表单或者过滤选择场景。这个功能涉及到JavaScript的基础知识,DOM操作,事件处理以及可能的AJAX技术。下面...

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

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

    select的左右移

    从文件内容来看,主要涉及了通过JavaScript操作HTML中的`&lt;select&gt;`元素,实现选项的左右移动、上下移动等功能。下面将详细阐述这些功能的实现原理与方法。 ### 一、基础知识 在开始深入探讨之前,我们先来了解一些...

    基于纯js是实现的能够在上下两个列表框及数据项位置移动的程序代码

    3. **上下移动功能**: 用户可以通过上下箭头或者按钮来移动列表框中的数据项。这涉及到对选中项的检测,以及对DOM结构的修改。当一个项目被选中时,通过JavaScript事件监听器捕获用户操作,然后根据用户的上移或...

    select2.dist文件4.0.5版

    在提供的“young”压缩包中,可能包含了Select2 4.0.5版本的完整资源,包括CSS文件(用于样式定义)、JavaScript文件(包含核心功能)以及示例代码或文档。解压后,根据项目需求将相关文件引入到HTML页面中,即可...

Global site tag (gtag.js) - Google Analytics