<!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. .Net开发笔记（十五） 基于“泵”的TCP通讯（接上篇）

    上一篇博客中说了基于“泵”的UDP通讯,附上了一个Demo,模拟飞鸽传书的功能,功能不太完善,主要是为了说明“泵”在编程中的应用.本篇文章我再附上一个关于TCP通讯的两个Demo,也都采用了“泵”模式 ...

  2. C语言 · 查找整数

    问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含n个非负整数,为给定的数列,数列中的每个数都不大于10000. 第三行包含一个 ...

  3. 支持向量机（SVM）复习总结

    摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 其基本模型定义为特征空间上的间隔最大的线性分类器,即支持向量机的学习策略 ...

  4. struts2+spring+hibernate 实现分页

    在这里要感谢下这位博友发表的博文 http://www.blogjava.net/rongxh7/archive/2008/11/29/243456.html 通过对他代码的阅读,从而自己实现了网页分 ...

  5. Data Flow的Error Output

    一,在Data Flow Task中,对于Error Row的处理通过Error Output Tab配置的. 1,操作失败的类型:Error(Conversion) 和 Truncation. 2, ...

  6. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  7. VB.NET 如何进行调用HTTP外部接口

    直接上干货  Private Function POST(ByVal URL$, ByVal data$) Dim http On Error Resume Next http = CreateObj ...

  8. Android之Socket通信、List加载更多、Spinner下拉列表

    Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务 ...

  9. ASP.NET MVC之文件上传【一】（八）

    前言 这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult ...

  10. scikit-learn 支持向量机算法库使用小结

    之前通过一个系列对支持向量机(以下简称SVM)算法的原理做了一个总结,本文从实践的角度对scikit-learn SVM算法库的使用做一个小结.scikit-learn SVM算法库封装了libsvm ...