js 中移动元素的方法
2017-12-13 19:59:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <select multiple="multiple" size="8" id="left_box">
<option>水果</option>
<option>橘子</option>
<option>苹果</option>
<option>香蕉</option>
<option>梨子</option>
<option>凤梨</option>
<option>桃子</option>
<option>樱桃</option>
</select> <select multiple="multiple" size="8" id="right_box">
<option>购物车</option>
</select> <input id="to_right" onclick="to_right()" value="添加" type="button">
<input id="to_left" onclick="to_left()" value="取消" type="button">
<script>
var box_r=document.getElementById("right_box"); // 找到右边盒子对象
var box_l=document.getElementById("left_box"); // 找到左边盒子对象
var options=box_l.getElementsByTagName("option"); //找到左盒子下的所有option数组 (1)
function to_right() { // 移动到右边盒子方法 for (var i=0;i<options.length;i++){
var op=options[i];
if(op.selected==true){ //option有个属性,如果选中就自动加入了selected属性 所以通过这个逻辑来找出选中的option
box_r.appendChild(op); //appendChild方法不光是创建元素,还可以移动元素
i--;
}
}
}
function to_left() { //移动到左边盒子的方法
var options=document.getElementById("right_box").getElementsByTagName("option"); //(2)
for (i in options){
var op=options[i];
if(op.selected==true){
box_l.appendChild(op);
}
}
}
</script>
</body>
</html>
注:代码里用了2种循环的写法,效果略有不同。标记的2处的options其实用左边盒子和右边效果一样。
js 中移动元素的方法的更多相关文章
- js中迭代元素特性与DOM中的DocumentFragment类型 笔记
JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- PHP从数组中删除元素的方法
PHP从数组中删除元素的方法 本篇文章主要介绍了PHP从数组中删除元素的四种方法实例 删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: 1 2 3 4 5 <?php $ ...
- PHP实现查询两个数组中不同元素的方法
以下实例讲述了PHP实现查询两个数组中不同元素的方法.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- node.js中的url.parse方法使用说明
node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...
- 在Js中得到元素的子元素集合注意事项
http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...
- python中列表元素连接方法join用法实例
python中列表元素连接方法join用法实例 这篇文章主要介绍了python中列表元素连接方法join用法,实例分析了Python中join方法的使用技巧,非常具有实用价值,分享给大家供大家参考. ...
- python去除列表中重复元素的方法
列表中元素位置的索引用的是L.index 本文实例讲述了Python去除列表中重复元素的方法.分享给大家供大家参考.具体如下: 比较容易记忆的是用内置的set 1 2 3 l1 = ['b','c', ...
- jquery iframe父子框架中的元素访问方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window. ...
随机推荐
- 一、认识Node.js
1.什么是Note.js? 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个 Javascript 运行环境(runtime).它让 JavaScript 可 ...
- jquery $.each()循环退出
$.each()循环跳出,应该用return 来返回 在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式:break----用ret ...
- sysbase 笔记
Alter 在已有数据的表中新增一个字段: ALTER table ciecdb.ciec.eci_mansmfile ADD num int default 0;
- linking against a dylib which is not safe for use in application extensions
完成到这里可能会出现警告 linking against a dylib which is not safe for use in application extensions 解决办法:
- numpy常用功能总结、python格式化输入输出
#coding:utf-8 #author:徐卜灵 ##################### #由于在各大公司笔试的时候总是会遇到一些格式化输入输出数据,今天就来总结一下. #结合numpy来处理数 ...
- php中的openssl开启方法
windows下开启方法: 1: 首先检查php.ini中:extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘:', 如果不存在这行,那么添加extensio ...
- VS2013过期激活
然后点击"更改我的产品许可证",输入密钥 : BWG7X-J98B3-W34RT-33B3R-JVYW9 即可注册成功...
- shell-002:统计IP访问量
统计IP访问量 #!/bin/bash # 统计IP的访问量 # 第一步首先得获取到日志的IP # 第二步给IP排序,这样相同的的IP就会在一起 sort # 第三步则给重复的IP统计数量,去重 un ...
- JAVA GET 和 POST 的区别
GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...
- python学习之路---day05
字典一:基本组成 dic={"",[],{},"",2,} 字典由key 和value组成, key(键):键是不可变的(且必须要不可改变),一个字典中的key ...