<!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. [网络转载 ]LoadRunner技巧之THML与URL两种录制模式分析

    loadrunner自带网站的访问 Html_based script模式 Action() { web_url("WebTours", "URL=http://127. ...

  2. 汇编语言从入门到精通-5微机CPU的指令系统2

    微机CPU的指令系统 5.2.2 标志位操作指令 标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 a.清进位指令CLC(Clear Carry Flag):CF ...

  3. LeetCode 83. Remove Duplicates from Sorted List（从有序链表中删除重复节点）

    题意:从有序链表中删除重复节点. /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode ...

  4. Java1.7已经舍弃substr了

    网上一堆在写substring和substr区别的文章,都是过时的. 起码在官方6.0的api文档中已经找不到了,只有substring()

  5. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

  6. Flatpak 1.5.2 即将发布

    导读 Flatpak 1.5.1开发版本为Flatpaks的受保护/经过身份验证的下载提供了初始支持,这是基础架构的工作,旨在允许Flathub或Linux上其他基于Flatpak的“应用程序商店”中 ...

  7. vs code 本地调试配置

    { "name": "使用本机 Chrome 调试", "type": "chrome", "request& ...

  8. Linux centos7VMware Apache和PHP结合、Apache默认虚拟主机

    一.Apache和PHP结合 httpd主配置文件/usr/local/apache2.4/conf/httpd.conf 启动报错 [root@davery ~]# /usr/local/apach ...

  9. R rep() 函数

    函数 rep(x,...) rep(x,times = n) 将向量 x 重复 n 次 rep(x,each = n) 将向量 x 的每个元素重复 n 次 在参数缺省情况下,为参数 times

  10. redis 之redis持久化rdb与aof

    redis是内存型的数据库 重启服务器丢失数据 重启redis服务丢失数据 断电丢失数据 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失,为了解决这个问题,Redis提供了两种 ...