`

JS学习笔记之左边列表移到到右边列表

阅读更多

实现功能:
1.左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除;
2.支持列表中项目上下位置的移动;
3.效果图如下:



 

 

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> Select Demo </TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. </HEAD>  
  10. <style>  
  11.     center  
  12.     {  
  13.         font-size:12px;  
  14.         color:red;  
  15.         font-weight:bold;  
  16.     }  
  17.     select  
  18.     {  
  19.         font-size:12px;  
  20.         color:green;  
  21.     }  
  22. </style>  
  23.   
  24. <BODY>  
  25.     <span id='feedback'></span>  
  26.       
  27.     <form method="post" name="myform">  
  28.   <table border="0" width="400">  
  29.  <tr>  
  30.   <td><CENTER>可选择排序方式</CENTER></td>  
  31.   <td> </td>  
  32.   <td><CENTER>已选择排序方式</CENTER></td>  
  33.  </tr>  
  34.     <tr>  
  35.       <td width="40%">  
  36.   <select  multiple name="left" id="left" size="8" style='width:200;'  
  37.   ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">  
  38.        <option value="20">测试数据一</option>  
  39.        <option value="30">测试数据二</option>  
  40.        <option value="40">测试数据三</option>  
  41.        <option value="50">测试数据四</option>  
  42.        <option value="60">测试数据五</option>  
  43.        <option value="70">测试数据六</option>    
  44.        <option value="80">测试数据七</option>  
  45.        <option value="90">测试数据八</option>    
  46.   </select>  
  47.    </td>  
  48.       <td width="20%" align="center">  
  49.   <input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>  
  50.   <input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">  
  51.    </td>  
  52.       <td width="40%">  
  53.   <select  multiple name="right" id="right" size="8" style='width:200;'  
  54.   ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">  
  55.   </select>  
  56.    </td>  
  57.     </tr>  
  58.  <tr>  
  59.   <td colspan="3">  
  60.   <CENTER>  
  61.   <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">  
  62.   <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">  
  63.   <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">  
  64.   <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">  
  65.   </CENTER></td>  
  66.  </tr>  
  67.   </table>  
  68.       
  69.    
  70. </BODY>  
  71. </HTML>  
  72.   
  73.   
  74. <SCRIPT LANGUAGE="JavaScript">  
  75. <!--  
  76.     //上移  
  77.     function moveUp(obj)  
  78.   {   
  79.       for(var i=1; i < obj.length; i++)  
  80.       {//最上面的一个不需要移动,所以直接从i=1开始  
  81.         if(obj.options[i].selected)  
  82.         {  
  83.           if(!obj.options.item(i-1).selected)  
  84.           {  
  85.             var selText = obj.options[i].text;  
  86.             var selValue = obj.options[i].value;  
  87.                         obj.options[i].text = obj.options[i-1].text;  
  88.                         obj.options[i].value = obj.options[i-1].value;  
  89.                         obj.options[i].selected = false;  
  90.                         obj.options[i-1].text = selText;  
  91.                         obj.options[i-1].value = selValue;  
  92.                         obj.options[i-1].selected=true;  
  93.           }  
  94.         }  
  95.       }  
  96.     }  
  97.   
  98.         //下移  
  99.         function moveDown(obj)  
  100.     {  
  101.       for(var i = obj.length -2 ; i >= 0; i--)  
  102.       {//向下移动,最后一个不需要处理,所以直接从倒数第二个开始  
  103.         if(obj.options[i].selected)  
  104.         {  
  105.           if(!obj.options[i+1].selected)  
  106.           {  
  107.             var selText = obj.options[i].text;  
  108.             var selValue = obj.options[i].value;  
  109.             obj.options[i].text = obj.options[i+1].text;  
  110.             obj.options[i].value = obj.options[i+1].value;  
  111.            obj.options[i].selected = false;  
  112.           obj.options[i+1].text = selText;  
  113.           obj.options[i+1].value = selValue;  
  114.          obj.options[i+1].selected=true;  
  115.           }  
  116.         }  
  117.       }  
  118.     }  
  119.         //移动  
  120.         function moveOption(obj1, obj2)  
  121.         {  
  122.              for(var i = obj1.options.length - 1 ; i >= 0 ; i--)  
  123.              {  
  124.                  if(obj1.options[i].selected)  
  125.                  {  
  126.                     var opt = new Option(obj1.options[i].text,obj1.options[i].value);  
  127.                     opt.selected = true;  
  128.                     obj2.options.add(opt);  
  129.                     obj1.remove(i);  
  130.                 }  
  131.              }  
  132.         }  
  133.         //置顶  
  134.       function  moveTop(obj)   
  135.       {   
  136.             var  opts = [];   
  137.             for(var i =obj.options.length -1 ; i >= 0; i--)  
  138.             {  
  139.                 if(obj.options[i].selected)  
  140.                 {  
  141.                     opts.push(obj.options[i]);  
  142.                     obj.remove(i);  
  143.                 }  
  144.             }  
  145.             var index = 0 ;  
  146.             for(var t = opts.length-1 ; t>=0 ; t--)  
  147.             {  
  148.                 var opt = new Option(opts[t].text,opts[t].value);  
  149.                 opt.selected = true;  
  150.                 obj.options.add(opt, index++);  
  151.             }  
  152.         }   
  153.       //置底  
  154.       function  moveBottom(obj)   
  155.       {   
  156.             var  opts = [];   
  157.             for(var i =obj.options.length -1 ; i >= 0; i--)  
  158.             {  
  159.                 if(obj.options[i].selected)  
  160.                 {  
  161.                     opts.push(obj.options[i]);  
  162.                     obj.remove(i);  
  163.                 }  
  164.             }  
  165.              for(var t = opts.length-1 ; t>=0 ; t--)  
  166.             {  
  167.                 var opt = new Option(opts[t].text,opts[t].value);  
  168.                 opt.selected = true;  
  169.                 obj.options.add(opt);  
  170.             }  
  171.         }   
  172.   
  173.     //-->  
  174. </SCRIPT>  

 

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

相关推荐

    js continue学习笔记

    在这个"js continue学习笔记"中,我们将深入探讨`continue`的工作原理,并通过三个示例来演示其在实际应用中的不同用法。 首先,来看第一个代码片段: ```javascript iNum = 0; for (var i = 1; i ; i++) { iNum+...

    -vue.js学习笔记

    在Vue.js的学习过程中,了解JavaScript的基础知识是至关重要的,因为Vue.js是基于JavaScript构建的。以下是一些关于Vue.js和JavaScript核心概念的详细说明: 1. **日期对象**: 在JavaScript中,我们可以使用`Date...

    HTML5高级程序设计学习笔记

    ### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中,为了更好地组织页面内容并增强语义性,引入了一系列新的结构标签,这些标签不仅能够帮助开发者更清晰地定义页面的不同部分,同时也为搜索...

    openscales学习笔记8.24

    《openscales学习笔记8.24》主要涵盖了OpenScales库的使用和理解,这是一个针对地图数据处理和显示的开源工具。在这个学习笔记中,我们将深入探讨OpenScales的源码,以及它如何与工具结合,帮助开发者创建交互式地图...

    计算机图形学学习笔记.zip

    在这个学习笔记中,我们将重点关注使用WebGL这一Web上的3D图形库来实现彩色立方体的绘制及动态操作,包括旋转、平移和缩放。WebGL基于OpenGL标准,允许在浏览器环境中直接进行硬件加速的3D图形渲染。 首先,`...

    processing语言学习笔记

    Processing的学习笔记中提到了多个函数和概念,这里将详细解释几个关键点: - **ellipse()函数** - ellipse()是Processing中的一个函数,用于绘制圆形和椭圆图形。 - 它具有四种模式,分别是`RADIUS`、`CENTER`、...

    vtk学习笔记 ---绘制等值线

    通过`RenderWindowInteractor`,你可以与可视化结果进行交互,如旋转、平移和缩放。 6. **运行和交互**:最后,调用`RenderWindow`的`Render`方法开始渲染,然后可以通过`RenderWindowInteractor`进行用户交互。 ...

    CSS、js学习笔记(三)

    文章目录一、CSS部分1、有序列表、无序列表标记设置2、最小或最大的宽度或者高度3、标签内容溢出问题4、优先级设置二、js部分1、当页面滑动时事件(onscroll)2、鼠标移到某个位置时需要的效果 一、CSS部分 1、有序...

    jsp学习笔记总结(收集)

    《jsp学习笔记总结(收集)》 在IT领域,Java Server Pages(JSP)是一种用于构建动态网页的技术,它将HTML、CSS、JavaScript等客户端代码与Java代码结合在一起,使得开发者能够轻松地创建数据驱动的Web应用程序。...

    WebGL学习笔记(一).rar

    在“WebGL学习笔记(一)”中,我们将会探讨WebGL的基本概念、工作原理以及如何开始编写你的第一个WebGL程序。 1. **WebGL基本概念** - **上下文(Context)**:在HTML5中,WebGL是Canvas元素的一个上下文,通过`...

    mapxtreme学习笔记

    这篇学习笔记将涵盖MapXtreme的基本概念、核心功能、使用方法以及常见问题解决。 1. **基本概念** - 地图对象:MapXtreme中的核心元素,包括地图、图层、图例、比例尺等。 - 数据源:地图数据的来源,如Shapefile...

    javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码

    在JavaScript学习过程中,掌握事件处理是至关重要的。本篇笔记主要介绍了如何利用JavaScript来实现当鼠标经过`div`块时改变其背景色的效果。我们将会分析HTML、JavaScript和CSS三部分的代码,以便理解整个过程。 ...

    javascript学习笔记(十九) 节点的操作实现代码

    在本篇JavaScript学习笔记中,我们主要探讨了如何通过JavaScript来创建、添加、移除和操作HTML元素节点。 首先,我们了解了如何创建元素节点。`document.createElement()` 是一个非常重要的方法,它允许我们动态...

    HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

    - 将复杂的逻辑或计算移到JavaScript中,而非直接在Canvas上,以利用JavaScript的灵活性和性能。 4. **实践与示例** 博文可能提供了实际代码示例,展示如何结合上述技巧实现菜单高亮和像素字体。通过阅读和理解...

    arcims学习笔记

    ### ArcIMS学习笔记知识点梳理 #### 一、常用对象名称说明 在ArcIMS系统中,了解各个对象的作用对于实现特定功能至关重要。以下是几个常见的对象及其用途: 1. **theImage**:表示当前显示的地图图像。 2. **the...

    H5鼠标移到图片显示星星特效.zip

    【标题】"H5鼠标移到图片显示星星特效"是一个网页设计中的交互效果,它通过HTML5、CSS3以及JavaScript技术实现。这个效果通常用于增强用户体验,例如在用户将鼠标悬停在图片上时,显示出与图片相关的星星或其他动态...

    JavaScript笔记

    - **地图搜索**:JavaScript用于实现地图上的交互,如缩放、平移、标记等。 - **网页游戏**:JavaScript可以创建基于浏览器的游戏,处理用户输入和游戏逻辑。 - **用户输入验证**:通过JavaScript可以验证表单...

    android动画学习笔记及源码定义.pdf

    在Android平台上,动画是提升用户体验的关键元素之一。官方SDK提供了两种主要类型的动画机制:Tween Animation和Frame Animation。Tween Animation主要用于创建基于对象属性变化的动画,例如平移、缩放、旋转和透明...

    Java学习笔记-个人整理的

    {5.2.1}将浮点数四舍五入到指定精度}{98}{subsection.5.2.1} {6}Exception}{99}{chapter.6} {6.1}\ttfamily try-catch}{99}{section.6.1} {6.2}\ttfamily finally}{100}{section.6.2} {6.3}\ttfamily throws}{...

Global site tag (gtag.js) - Google Analytics