<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
     <select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">   
        <option value="1">a</option>   
        <option value="2">b</option>   
        <option value="3">c</option>    
        <option value="4">d</option>   
    </select>   
    <input type="button" value=">" onclick="move('leftBox','rightBox')"/>   
    <input type="button" value="<" onclick="move('rightBox','leftBox')"/>    
      <select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">   
        <option value="11">A</option>   
        <option value="22">B</option>   
        <option value="33">C</option>   
        <option value="44">D</option>   
    </select>        
    </body>
</html>
<script type="text/javascript">

function move(from,to) {

var fromBox = document.getElementById(from);

var toBox = document.getElementById(to);

while(fromBox.selectedIndex != -1){

toBox.appendChild(fromBox.options[fromBox.selectedIndex]); 
            } 
        }

</script>

JS: 子项可以来回交换的两个下拉列表的更多相关文章

  1. JS几种变量交换

    JS几种变量交换方式以及性能分析对比   原文 原文是自己博客上发布的JS几种变量交换方式以及性能分析对比 前言 “两个变量之间的值得交换”,这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要 ...

  2. JS几种变量交换方式以及性能分析对比

    前言 "两个变量之间的值得交换",这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比. 起由 最近做某个项目时,其中有一个需求是 ...

  3. js字符串长度计算(一个汉字==两个字符)和字符串截取

    js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...

  4. Js验证 ：只能输入数字和小数点 验证是否是数字 js取float型小数点后两位

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...

  5. js只允许输入数字和两位小数

    一.js只允许输入数字和两位小数 //只允许输入数字和两位小数 function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, ...

  6. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  7. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  8. 【WPF】两个下拉列表ComboBox的级联

    需求:两个ComboBox的级联,实现城市–小区级联. 问题:个人感觉WPF的核心应该是数据绑定这块.由于时间紧迫,粗略看Binding也是一头雾水,所以用了比较简单的方法做了两个下拉列表级联的效果: ...

  9. Js中JSON数据交换使用总结

    Json格式简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是JavaScript原 ...

随机推荐

  1. Maven项目-端口被占用java.net.BindException: Address already in use: JVM_Bind <null>:8080解决方法

    异常显示: 问题所在:之前启动的tomcat未停止,端口被占用. 解决方法: 养成良好的习惯,用完之后停掉服务.

  2. 「CH6201」走廊泼水节

    「CH6201」走廊泼水节 传送门 考虑 \(\text{Kruskal}\) 的过程以及用到一个最小生成树的性质即可. 在联通两个联通块时,我们肯定会选择最小的一条边来连接这两个联通块,那么这两个联 ...

  3. SpringMVC架构&组件&执行流程

    SpringMVC架构: 组件: DIspatcherServlet:前端控制器.相当于mvc模式的c,是整个流程控制的中心,负责调用其他组件处理用户的请求,降低了组件之间的耦合性. HandlerM ...

  4. 【SqlServer】利用sql语句附加，分离数据库-----转载

    利用sqlserver内置的存储过程sp_attach_db和sp_detach_db附加 exec sp_attach_db @dbname=N'数据库名',@filename1=N'.mdf的文件 ...

  5. C# Stream篇（—） -- Stream基类

    写在前头: Stream系列文章共收录7篇,本着备忘和归纳的目的本着备忘和归纳的目的,全部收录于本分类中. 下面是有原文连接,望各位看官还是到原作者处学习,毕竟CV过来的文字难免有走样之处. 原始连接 ...

  6. JS监听手机物理返回键，返回到指定页面

    pushHistory(); window.addEventListener("popstate", function(e) { window.location = data.in ...

  7. Jenkins——持续集成（CI）

    Jenkins介绍Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins功能包括:1. ...

  8. Java自学-集合框架 HashSet、LinkedHashSet、TreeSet之间的区别

    HashSet. LinkedHashSet.TreeSet之间的区别 步骤 1 : HashSet LinkedHashSet TreeSet HashSet: 无序 LinkedHashSet: ...

  9. springboot中文官方文档

    springboot中文官方文档 https://www.breakyizhan.com/springboot/3028.html spring框架 https://www.breakyizhan.c ...

  10. 获取网卡MAC、硬盘序列号、CPU_ID、BIOS编号

    抄来的 获取网卡MAC.硬盘序列号.CPU ID.BIOS编号 本文中所有原理及思想均取自网络,有修改.其中获取硬盘序列号.获取CPU编号.获取BIOS编号的原始代码的著作权归各自作者所有. 以下代码 ...