<!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. adb server is out of date. killing...

    1.查看adb端口号 adb nodaemon server 打印:cannot bind 'tcp:5037' 2.查看端口被哪个进程占用 netstat -ano | findstr " ...

  2. 免安裝、免設定的 Hadoop 開發環境 - cloudera 的 QuickStart VM

    cloudera 的 QuickStart VM,為一種免安裝.免設定 Linux 及 Hadoop,已幫你建好 CDH 5.x.Hadoop.Eclipse 的一個虛擬機環境.下載後解壓縮,可直接以 ...

  3. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  4. 日志log2

    public class LoggerHelper2 { private static ConcurrentQueue<string> CqMsg = null; private stat ...

  5. FreeBSD_11-系统管理——{Part_8 - IPFW}

    内核支持 方式一:静态編译进内核 options IPFIREWALL # enables IPFW options IPFIREWALL_VERBOSE # enables logging for ...

  6. <nginx.conf> nginx用户权限

    Nginx用户权限 在nginx.conf文件的第一行一般是设置用户的地方(编译安装nginx时的参数--user=<user>也是指定用户的地方),如 user www www; 如不指 ...

  7. js立即执行函数

    一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号   (function(){alert(1);})(); ...

  8. Plant Design Review Based on AnyCAD

    Plant Design Review Based on AnyCAD eryar@163.com Abstract. AVEVA Review is used to 3D model visuali ...

  9. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  10. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...