<!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. 【Prince2是什么】PRINCE2认证之Prince2衡量绩效的六大要素

      之前一篇文章已经跟大家从体系上讲解了PRINCE2和PMP的差异,那接下来我们进行第二讲,PRINCE2中讲到的衡量绩效的要素是什么呢? 第一,成本:即项目必须是所能负担的起的 第二,时间:即项目 ...

  2. Android开发学习之路-带文字的图片分享

    有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...

  3. 防止SQL注入攻击

    了解了SQL注入的方法,如何能防止SQL注入?如何进一步防范SQL注入的泛滥?通过一些合理的操作和配置来降低SQL注入的危险. 使用参数化的过滤性语句 要防御SQL注入,用户的输入就绝对不能直接被嵌入 ...

  4. CI Weekly #3 | 关于微服务、Docker 实践与 DevOps 指南

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  5. iOS-语言本地化

    在使用本地化语言之前,来看看本地化语言文件内容的结构(这里我以Chinese为例):"Cancel"="取消";"OK"="确定& ...

  6. SQL Server中使用Check约束提升性能

        在SQL Server中,SQL语句的执行是依赖查询优化器生成的执行计划,而执行计划的好坏直接关乎执行性能.     在查询优化器生成执行计划过程中,需要参考元数据来尽可能生成高效的执行计划, ...

  7. 实战MEF（5）：导出元数据

    如何理解元数 我们可以把元数据理解为随类型一起导出的附加信息.有时候我们会考虑,把元数据随类型一并导出,增加一些说明,使得我们在导入的时候,可以多一些筛选条件. 默认的类型导出带有元数据吗 上面的内容 ...

  8. datatable去重

    两种方法1 数据库直接去除重复select distinct * from 表名去除了重复行distinct 2 对 DataTable直接进行操作DataTable dt=db.GetDt(&quo ...

  9. Android 裁剪图片为圆形图片

    转自http://blog.csdn.net/kkmike999/article/details/16359713 /** * 转换图片成圆形 * * @param bitmap * 传入Bitmap ...

  10. Android实现对图片的缩放、剪切、旋转、存储

    转载:http://www.cnblogs.com/jerehedu/p/4464870.html 一.问题描述: 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片 ...