<!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. kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件

    小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ...

  2. Functional Programming without Lambda - Part 2 Lifting, Functor, Monad

    Lifting Now, let's review map from another perspective. map :: (T -> R) -> [T] -> [R] accep ...

  3. 新浪计数业务之Redis

    今天听一个同事说新浪使用的是Redis,于是自己将研究的过程整理出来以备后用. 我们都知道微博这玩意儿现在很火,新浪作为国内最早使用redis,并且是国内最大的redis使用者,当然备受人们关注.新浪 ...

  4. jquery中bind()绑定多个事件

    bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),da ...

  5. wpf Webbrowser 乱码问题及弹窗被遮挡

    wpf的webbrowser在使用NavigateToString(string text);方法时如果字符串含有中文字符,并在html的头文件中没有声明Document的编码方式为UTF-8的话,由 ...

  6. 操作数据库mysql

    显示表结构 desc 表 显示数据库信息 show  create database 数据库名 show create table 表名

  7. Leetcode-24 Swap Nodes in Pairs

    #24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...

  8. MVC 区域内默认控制器不能访问（Multiple types were found that match the controller named ‘Index'）

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 错误信息 和主页的默认控制器冲突了,修改下Areas里面的默认控制器就可以了

  9. Create views of OpenCASCADE objects in the Debugger

    Create views of OpenCASCADE objects in the Debugger eryar@163.com Abstract. The Visual Studio Natvis ...

  10. Netbeans配置Xdebug

    1.进入 http://xdebug.org/wizard.php 页面,新建一个php页面,里面输入 echo phpinfo(); 然后在运行的页面,复制页面内容到里面, 这个网站会分析出,当前运 ...