【JavaScript】列表元素上下左右移动：Select和Option的应用

最新推荐文章于 2023-06-21 17:08:56 发布
最新推荐文章于 2023-06-21 17:08:56 发布
阅读量3k 收藏 2
点赞数
分类专栏： 【01】JavaScript 【06】SourceCode 文章标签： javascript button function null .net html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majianan/article/details/3614255
版权
这篇博客介绍了如何使用JavaScript实现列表元素在Select选项之间的上下左右移动，支持一次选择多个选项进行操作。文章提供了具体的代码示例，适合学习JavaScript和HTML交互的开发者参考。
摘要由CSDN通过智能技术生成

 【JavaScript】列表元素上下左右移动：Select和Option的应用

马嘉楠    2008-12-26

共同学习，欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2008/12/26/3614255.aspx】，谢谢O(∩_∩)O！

 

 

功能如下：

支持一次选中多项在左右列表中来回移动

 

<script language=javascript> var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index = currentSel.selectedIndex; if(direction){//up if(index==0) return; var value = currentSel.options[index-1].value; var text = currentSel.options[index-1].text; currentSel.options[index-1].value = currentSel.options[index].value; currentSel.options[index-1].text = currentSel.options[index].text; currentSel.options[index].value = value; currentSel.options[index].text = text; currentSel.options[index].selected = false; currentSel.options[index-1].selected = true; }else{//down if(index==(currentSel.length-1)) return; var value = currentSel.options[index+1].value; var text = currentSel.options[index+1].text; currentSel.options[index+1].value = currentSel.options[index].value; currentSel.options[index+1].text = currentSel.options[index].text; currentSel.options[index].value = value; currentSel.options[index].text = text; currentSel.options[index].selected = false; currentSel.options[index+1].selected = true; } } function moveRight(src,des){ if(src.selectedIndex==-1){ alert("Please select first!"); return; } for(var i=0;i


    •  

     

     

    代码如下：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
          <HEAD>
           <TITLE> New Document </TITLE>
           <META NAME="Author" CONTENT="majianan">
           <script language="javascript" >
               var currentSel = null ;
              function      move(){
                  if(arguments.length==1     ){
                  moveUp(arguments[    0     ]);
              }    else if(arguments.length==2     ){
                  moveRight(arguments[    0],arguments[1     ]);
              }
          }
              function      moveUp(direction){
                  if(currentSel == null) return     ;
                  var index =
    最低0.47元/天 解锁文章
    majianan
    关注
    • 0
      点赞
    • 踩
    • 2
      收藏
      觉得还不错? 一键收藏
    • 2
      评论
    专栏目录
    javascript练习：列表项目的增删
    Mortal__的博客
    11-11 513
    效果图片： 代码效果动态图 基础结构与样式：HTML+Css部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表的增删和移动</title> <style> body { background: #ddd; text-align: center } .list {
    【JS】【列表移动】【基于JQuery】
    Armo的博客
    12-25 267
    思路: 通过两个列表(已有权限列表+未有权限列表)来操作员工的权限 noList表示尚未拥有的权限,通过方法得到 myList表示员工已经拥有的权限. 从数据库中得到 allList表示全部权限.从数据库中得到 Action代码 访问对应url,请求转发到修改页面.传递参数noList,myList //跳转到更改权限页面 public String changePermissi
    JavaScript前端开发 DOM 列表的增删和移动
    IT_world_的博客
    11-13 7077
    利用DOM操作节点的方式实现列表的增删和移动 case.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表的增删和移动</title> <style> body{background:#ddd;te...
    JavaScript实现项目列表的增删移动
    博客来自passerby&
    12-08 4093
    JavaScript实现项目列表的增删移动 在前面我们已经学习了html和css，相信大家对此应该有了相当的理解 想要完成此项任务我们需要准备以下知识点： Find()定义和用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 当数组中的元素在测试条件时返回 true 时
    JS实现一个列表中包含上移下移删除等功能
    10-25
    一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
    JavaScript Select和Option列表元素上下左右移动
    10-30
    JavaScript Select和Option列表元素上下左右移动 在这个资源中，我们将要讨论如何使用 JavaScript 实现 Select 和 Option 列表元素的上下左右移动功能。这个功能支持一次选中多项在左右列表中来回移动，非常适合在...
    JavaScript, select标签元素左右移动功能实现
    10-15
    当一个option元素从一个select元素移动到另一个时，它的实际位置在文档中发生了改变。此外，`selected` 属性用于追踪option元素的选中状态。 在实际应用中，这样的功能可能用于实现列表的分类、筛选或者在不同视图...
    JavaScript控制listbox列表框的项目上下移动的方法
    10-24
    为了实现listbox列表框项目上下移动的功能，可以通过编写JavaScript函数来操作DOM中的option元素。这段代码的目的是为listbox列表框提供一个方法，使得选定的选项能够向上或向下移动。 函数listbox_move接受两个...
    JS实现Select的option上下移动的方法
    11-23
    总的来说，实现`<select>`元素中`<option>`的上下移动是通过JavaScript对DOM操作的一种应用，它涉及到了对`<select>`和`<option>`元素的属性访问、数组操作以及事件监听。这种功能对于创建自定义的下拉列表排序界面...
    js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
    08-12
    对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。 js刷新、复选框全选，全不选，添加，拷贝，上下移动，删除功能实现。
    js实现提交前对列表数据的增删改查
    12-28
    js实现列表数据的增删改查，AJAX提交后,js操作数据 最近工作中，有一处列表数据是页面初始化加载的，用户可以进行操作，因为这些数据并不存在数据库中，同时为了数据的整洁以及高效，所以要在页面进行增删改操作（其实查也可以，类似改），之前写过一个二维数组保存的，代码乱而且效率不高，后改用object 感觉还可以，主要是查询和删除的时候不需要自己遍历数组。 1. html 列表是用div+ul标签弄的，贴一些用到的片段 1.1 要展示的列表 列表标题 <div class=tab-list
    js+html写的实现表格的动态增删改查和表单验证
    08-04
    js+html写的实现表格的动态增删改查和表单验证
    jQuery动态添加删除移动列表插件
    06-10
    这是一款实用的jQuery动态添加移动列表插件，jQuery动态添加数据代码，jQuery动态数据代码。
    js 移动 看完就删
    07-03
    我的独立资源
    JavaScript js 左右移动下拉列表选项
    hoojo
    07-20 3606
    最开始想每个方法中用一个循环搞定，后来发现循环删除后。options的索引和集合就发生了变化，删除就不成功。有时候还出现selected为空的现象，2个循环就over了； addMulitOptions.html
    js如何实现列表数据的上移和下移？以及置顶、置底功能
    最新发布
    weixin_52099241的博客
    06-21 3408
    首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
    JS 实现列表移动（JQuery实现）
    zzvar的博客
    05-29 2150
    JS 实现列表移动学习内容：需求总结： 学习内容： 需求 用 JS 实现列表移动 实现代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>列表移动</title> <script type="text/javascript" src="/static/jQuery-1.11/jquery-
    js拖动（点击+移动）
    qq_42275455的博客
    09-08 4858
    双层函数：点击事件+鼠标移动事件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #bar{
    js实现列表的增删改查功能
    JackieDYH的博客
    04-04 3162
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; }...
    JavaScript教程：构建选项对象的格式与功能详解
    在JavaScript讲义中，关于“建立选项对象的格式”这一部分，主要讨论了如何在网页开发中创建和管理下拉列表（通常用于菜单或选择框）中可供用户选择的选项。选项对象是HTML `<select>`元素的核心组成部分，它允许...
    评论 2
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值