js动态的把左边列表添加到右边,可上下移动。

<!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>
时间: 2024-10-14 08:57:40

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

JS学习笔记之左边列表移到到右边列表

<HTML> <HEAD> <TITLE>选择下拉菜单</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Description" CONTENT="Power by hill"> </HEAD> <BODY&g

每天都有新发现——如何优雅的用js动态添加html代码

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

js动态生成数据列表

我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js来动态生成表格. 首先我们需要先写好页面的样式. html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

js如何动态为指定的元素添加内容

js如何动态为指定的元素添加内容:在实际应用中要根据代码的执行情况来动态的创建一个元素,然后添加到指定的元素,下面就通过一个简单的实例简单的介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

Js动态添加复选框Checkbox的实例方法!!!

首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用 document.createTe

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

作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 其所谓的动态添加事件实质就是指js中的事件委托. 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定

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

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以

js 动态给元素添加、移除事件

最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作作用域:事件处理程序会在其所属元素的作用域内运行addEventListener(event,function,capturebubble);removeEventListener(event,function,capture

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

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