<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <meta name="author" content="" />

  <meta name="keywords" content="" />

  <meta name="description" content="" />

  <link rel="stylesheet" type="text/css" href="" />

  <style type="text/css"></style>

  <script type="text/javascript"></script>

  <META NAME="Description" CONTENT="Power by hill">

 </head>

 <body>

<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>

<form method="post" name="myform">

<table border="0" width="300">

    <tr>

            <td width="40%">

                    <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">

                            <option value="北京">北京</option>

                            <option value="上海">上海</option>

                            <option value="山东">山东</option>

                            <option value="安徽">安徽</option>

                            <option value="重庆">重庆</option>

                            <option value="福建">福建</option>

                            <option value="甘肃">甘肃</option>

                            <option value="广东">广东</option>

                            <option value="广西">广西</option>

                            <option value="贵州">贵州</option>

                            <option value="海南">海南</option>

                            <option value="河北">河北</option>

                            <option value="黑龙江">黑龙江</option>

                    </select>

            </td> 

            <td width="20%" align="center">

                <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)">

                <br/>

                <br/>

                <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">

            </td> 

            <td width="40%">

                <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">

                </select>

            </td> 

            <td>

                <button onclick="changepos(list2,-1)" type="button">上移</button>

            <br/>

            <button onclick="changepos(list2,1)" type="button">下移</button>

            </td>

    </tr>

</table>

值：<input type="text" name="city" size="40">

</form>

<script language="JavaScript">

        function moveOption(e1, e2){

            try{

                    for(var i=0;i<e1.options.length;i++){

                        if(e1.options[i].selected){

                            var e = e1.options[i];

                                e2.options.add(new Option(e.text, e.value));

                                    e1.remove(i);

                                        ii=i-1

                                }

                          }

        document.myform.city.value=getvalue(document.myform.list2);

                    }

        catch(e){}

            } 

        function getvalue(geto){

            var allvalue = "";

                for(var i=0;i<geto.options.length;i++){

                        allvalue +=geto.options[i].value + ",";

                    }

                return allvalue;

             } 

        function changepos(obj,index) {

            if(index==-1){

                    if (obj.selectedIndex>0){

                        obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))

                        }

               } else if(index==1){

                        if (obj.selectedIndex<obj.options.length-1){

                                obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))

                                 }

                        }

                } 

</script>

 </body>

</html>

js动态的把左边列表添加到右边，可上下移动。的更多相关文章

  1. js动态的把左边列表添加到右边，可删除。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 关于如何利用原生js动态给一个空对象添加属性以及属性值

    首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候 ...

  3. js动态的给json对象添加新的元素

    把{name:"xxx",age:"xxx"}变成{name:"xxx",age:"xxx",value:"x ...

  4. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  5. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  6. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  7. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  8. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  9. 【原生js】js动态添加dom，如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

随机推荐

  1. iOS开发系列--让你的应用“动”起来

    --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建 ...

  2. [.net 面向对象程序设计进阶] (23) 团队开发利器（二）优秀的版本控制工具SVN(上)

    [.net 面向对象程序设计进阶] (23) 团队开发利器(二)优秀的版本控制工具SVN(上) 本篇导读: 上篇介绍了常用的代码管理工具VSS,看了一下评论,很多同学深恶痛绝,有的甚至因为公司使用VS ...

  3. Jmeter 使用Jmeter与Badboy进行压力测试

    1. 介绍 Badboy是一个录制请求的工具,这里用它来生成文件给JMeter用. JMeter是一个用java写的开源的性能测试工具,用于模拟在服务器.网络或者其他对象上附加高负载以测试他们提供服务 ...

  4. Leetcode-83 Remove Duplicates from Sorted List

    #83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...

  5. Latch1：理解 PageIOLatch和PageLatch

    Latch主要分为三种,Buffer Latch,I/O Latch, non-buf latch. 1,PageLatch 在访问数据库的数据页(Data Page或Index Page)时,如果相 ...

  6. CRM/ERP 企业管理软件中常见的七种程序设计模式

    管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1  RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...

  7. Windows系统盘占用空间分析

    磁盘分析 本机的系统盘是C盘,操作系统是Windows 7 专业版,通过磁盘属性可以看到C盘的已用空间是69.4G. 而我们运行自己编写的脚本(脚本程序参考附录,统计原理:计算目录下各个文件的大小,然 ...

  8. File类使用小结

    一.构造函数 File(String pathname):根据参数转换为抽象路径名创建File实例 File(String parent,String filename):根据parent和filen ...

  9. 深入学习jQuery节点关系

    × 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形 ...

  10. 深入学习jQuery样式操作

    × 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...