<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择项</title> <script>
// 选中添加到右边
function selectedToRight(){ // 获取select2标签
var select2 = document.getElementById("select2");
// 获取select1标签
var select1 = document.getElementById("select1");
// 获取option
var option1 = select1.getElementsByTagName("option");
// 遍历
for (var i=0;i<option1.length;i++) {
var optioni = option1[i];
//是否被选中
if(optioni.selected == true){
// 添加到select2里面
select2.appendChild(optioni);
//数组长度发生变化,需要处理
i--;
}
}
} // 选中添加到左边
function selectedToLeft(){ // 获取select2标签
var select2 = document.getElementById("select2");
// 获取select1标签
var select1 = document.getElementById("select1");
// 获取option
var option2 = select2.getElementsByTagName("option");
// 遍历
for (var i=0;i<option2.length;i++) {
var optioni = option2[i];
//是否被选中
if(optioni.selected == true){
// 添加到select1里面
select1.appendChild(optioni);
//数组长度发生变化,需要处理
i--;
}
}
} // 全部添加到右边
function allToRight(){
// 获取select2标签
var select2 = document.getElementById("select2");
// 获取select1标签
var select1 = document.getElementById("select1");
// 获取option
var option1 = select1.getElementsByTagName("option");
// 遍历
for (var i=0;i<option1.length;i++) {
var optioni = option1[i];
// 添加到select2里面
select2.appendChild(optioni);
//数组长度发生变化,需要处理
i--;
}
} // 全部添加到左边
function allToLeft(){ // 获取select2标签
var select2 = document.getElementById("select2");
// 获取select1标签
var select1 = document.getElementById("select1");
// 获取option
var option2 = select2.getElementsByTagName("option");
// 遍历
for (var i=0;i<option2.length;i++) {
var optioni = option2[i];
// 添加到select1里面
select1.appendChild(optioni);
//数组长度发生变化,需要处理
i--; }
}
</script> </head>
<body>
<div id="s1" style="float: left;">
<div>
<select id="select1" multiple="multiple" style="width: 100px;height: 100px;">
<option>AAAAAAA</option>
<option>BBBBBBB</option>
<option>CCCCCCC</option>
<option>DDDDDDD</option>
<option>EEEEEEE</option>
</select> <div>
<input type="button" value="选中添加到右边" onclick="selectedToRight();"/><br />
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div> </div>
</div> <div id="s2" >
<div>
<select id="select2" multiple="multiple" style="width: 100px;height: 100px;">
<option>FFFFFFF</option>
</select> <div>
<input type="button" value="选中添加到左边" onclick="selectedToLeft();"/><br />
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div> </div>
</div> </body>
</html>

html 把左框的选中项添加到右框的更多相关文章

  1. MFC CListCtrl 将一个列表的选中项添加到另一个列表

    MFC CListCtrl 将一个列表的选中项添加到另一个列表, 用VC6.0实现: 简单记录一下自己的学习历程, 和大家分享,如果对你有用,我很高兴. 1.新建一个基于对话框的工程(Dialog-B ...

  2. JSP页面获取下来框select选中项的值和文本的方法

    <select id="username"  name=""> <option   value="1">jyy< ...

  3. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  4. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  5. 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。

    getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...

  6. 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

    最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...

  7. 让单选input框,不在被选中,添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

  8. jq select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  9. 复选框(checkox)全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

随机推荐

  1. [kuangbin带你飞]专题六 最小生成树

    学习最小生成树已经有一段时间了 做一些比较简单的题还算得心应手..花了三天的时间做完了kuangbin的专题 写一个题解出来记录一下(虽然几乎都是模板题) 做完的感想:有很多地方都要注意 n == 1 ...

  2. poj2387 初涉最短路

    前两天自学了一点点最短路..看起来很简单的样子... 就去kuangbin的专题找了最简单的一道题练手..然后被自己萌萌的三重for循环超时虐的不要不要的~ 松弛虽然会但是用的十分之不熟练... 代码 ...

  3. Apache Spark源码走读之22 -- 浅谈mllib中线性回归的算法实现

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文简要描述线性回归算法在Spark MLLib中的具体实现,涉及线性回归算法本身及线性回归并行处理的理论基础,然后对代码实现部分进行走读. 线性回归模型 ...

  4. mysql 导入导出.sql文件

    备份数据库(包含全部表和全部存储过程):C:\Documents and Settings\Administrator>mysqldump -h localhost -u root -p -R ...

  5. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  6. 12.PHP内核探索:PHP的FastCGI

    CGI全称是“通用网关接口”(Common Gateway Interface), 它可以让一个客户端,从网页浏览器向执行在Web服务器上的程序请求数据. CGI描述了客户端和这个程序之间传输数据的一 ...

  7. PHP基础语法: echo,var_dump, 常用函数:随机数:拆分字符串:explode()、rand()、日期时间:time()、字符串转化为时间戳:strtotime()可变参数的函数:PHP里数组长度表示方法:count($attr[指数组]);字符串长度:strlen($a)

    PHP语言原理:先把代码显示在源代码中,再通过浏览器解析在网页上 a. 1.substr;  //用于输出字符串中,需要的某一部分 <?PHP $a="learn php"; ...

  8. FW docker使用问题总结,解决国内不能访问gcr.io的问题

    docker使用问题总结 解决国内不能访问gcr.io的问题 国内可以通过https://dashboard.daocloud.io来下载. 比如?gcr.io/google_containers/p ...

  9. Mongo中的数组操作

    当前mongo中有这么一条数据 book是一个数组,在他后面添加一条数据 { "_id" : ObjectId("5721f504d1f70435632b5ce7&quo ...

  10. php获得文件夹下所有文件的递归算法

    function my_scandir($dir){ $files=array(); if(is_dir($dir)) { if($handle=opendir($dir)) { while(($fi ...