JS——选择水果
注意点：
1、select标签size属性显示选项数组，multiple属性可以多选
2、原select节点下的子节点在移动到其他selec标签下的时候，其原来的select标签下子节点长度在发生变化
3、注册事件可以直接绑定一个函数名，但是如果绑定的函数有参数，那么必须将这个有参数的函数写入到匿名函数中
4、Array.from可将一个类似数组或可迭代对象中创建一个新的数组实例
选择水果简单版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select {
width: 100px;
height: 200px;
background-color: #D3FF82;
}
</style>
</head>
<body>
<select size="10">
<option>香蕉</option>
<option>苹果</option>
<option>葡萄</option>
<option>西瓜</option>
<option>芒果</option>
</select>
<button><<<<</button>
<button><</button>
<button>>>>></button>
<button>></button>
<select size="10"></select>
<script>
var btnArr = document.getElementsByTagName("button");
var selArr = document.getElementsByTagName("select");
//selArr数组的长度一直在变化
btnArr[0].onclick = function () {
for (var i = 0; i < selArr[0].children.length;) {
selArr[1].appendChild(selArr[0].children[i]);
}
}
btnArr[2].onclick = function () {
for (var i = 0; i < selArr[1].children.length;) {
selArr[0].appendChild(selArr[1].children[i]);
}
}
btnArr[1].onclick = function () {
for (var i = selArr[0].children.length-1; i >= 0; i--) {
if (selArr[0].children[i].selected == true) {
selArr[1].appendChild(selArr[0].children[i]);
}
}
}
btnArr[3].onclick = function () {
for (var i = selArr[1].children.length-1; i >= 0; i--) {
if (selArr[1].children[i].selected == true) {
selArr[0].appendChild(selArr[1].children[i]);
}
}
}
</script>
</body>
</html>
选择水果最终版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select {
width: 100px;
height: 200px;
background-color: #D3FF82;
}
</style>
</head>
<body>
<select size="10" multiple="multiple">
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">葡萄</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
<button><<<<</button>
<button><</button>
<button>>>>></button>
<button>></button>
<select size="10" multiple="multiple"></select>
<script>
var btnArr = document.getElementsByTagName("button");
var selArr = document.getElementsByTagName("select");
//selArr数组的长度一直在变化
//注册事件调用函数，在无参数的情况下可以直接绑定一个函数名，有参数的话，只能在匿名函数中调用
btnArr[0].onclick = function () {
allMove(selArr[0], selArr[1]);
}
btnArr[2].onclick = function () {
allMove(selArr[1], selArr[0]);
} function allMove(se1, se2) {
for (var i = 0; i < se1.children.length;) {
se1.children[i].selected = false;
se2.appendChild(se1.children[i]);
}
} btnArr[1].onclick = function () {
sigleSwitch(selArr[0], selArr[1]);
}
btnArr[3].onclick = function () {
sigleSwitch(selArr[1], selArr[0]);
} function sigleSwitch(se1, se2) {
for (var i = se1.children.length - 1; i >= 0; i--) {
if (se1.children[i].selected == true) {
se1.children[i].selected = false;
se2.appendChild(se1.children[i]);
}
}
//对se2排序，并将排序过后的值存储到arr数组中
var arr = Array.from(se2.children).sort(function (a, b) {
return a.value - b.value;
});
//删除se2中的子节点
for (var i = 0; i < se2.children.length;) {
se2.removeChild(se2.children[i]);
}
//将arr数组中的子节点添加到se2中
for (var i = 0; i < arr.length; i++) {
se2.appendChild(arr[i]);
}
}
</script>
</body>
</html>
JS——选择水果的更多相关文章
- vue.js选择if（条件渲染）详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- js选择目录
找了好久,终于找到了! function browseFolder(path) {//打开本地目录(目录选择功能) try { var Message = "\u8bf7\u9009\u62 ...
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...
- 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...
- （二）js选择结构
1.js的执行顺序. a) 一般按照书写的顺序来执行. b) 另外一种是通过判断然后执行下一项语句. 注:一般讲js语句写在body内容的最后来执行. 2.js的结构 a) 顺序结构 ...
- 【Node.js】2.开发Node.js选择哪个IDE 开发工具呢
安装完Node.js之后,就要为它选择一个有利的IDE用于开发. 相比较了多个IDE之后,定位在webstrom和sublime上. 有一个简单的比较: webstorm功能很丰富,前端开发工具的集大 ...
随机推荐
- 简单svg动画
一.将svg嵌入到html中 svg是指可伸缩矢量图形,它使用XML格式定义图像.在html中可以使用<svg>标签直接嵌入svg代码,例如: <svg version=" ...
- Shortest Prefixes（poj 2001）
题意:给出n个单词(1<=n<=1000),求出每个单词的非公共前缀,如果没有,则输出自己. /* 字典树 在裸字典树的基础上,设置一个sum数组,sum[i]表示i这个节点被用过几次,当 ...
- 校长的收藏（洛谷 U4534）
题目背景 XS中学的校长喜欢收集手办,家里面都是价值不菲的手办. 校长喜欢给手办们排队并且对于某些些区间内的手办喜爱有加. 现在,校长外出散步(找乐子),你潜入他的房间打算借(偷走)他的手办炫耀一下. ...
- Ubuntu 16.04添加阿里云源/163源
添加国内源有个好处,比如下载软件时直接时国内的服务器,速度有保证. 以下是操作方法: 1.备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list. ...
- curl -O 下载文件
curl -O 下载文件 学习了:http://blog.csdn.net/wulong710/article/details/53127606 curl -O http://a.b.c/a.tar ...
- 线段树+离散化 IP地址段检查 SEGMENT TREE
Problem: Give a series of IP segments, for example, [0.0.0.1-0.0.0.3], [123.234.232.21-123.245.21.1] ...
- 【转】MySQL随机字符串生成
DROP FUNCTION IF EXISTS rand_string; DELIMITER $$ CREATE FUNCTION rand_string(str_length TINYINT UNS ...
- oop_day06_抽象类、接口_20150814
oop_day06_抽象类.接口_20150814 1.static final常量: 1)必须声明同一时候初始化.不能改动,类名点来訪问 2)常量名建议全部字母都大写 3)编译器编译时会直接替换为详 ...
- 【Unity】用Shader编程实现3D红心
有些形状,即使没有3D美术设计师提供模型,也能够用代码生成. 对于想保持原创性不想借用他人模型的独立开发人员来说,这无非是一个非常重要的途径. 今天献给大家的是用Shader编程实现的一颗红心,寄托下 ...
- postgis经常使用函数介绍（一）
概述: 在进行地理信息系统开发的过程中,经常使用的空间数据库有esri的sde,postgres的postgis以及mySQL的mysql gis等等,在本文.给大家介绍的是有关postgis的一些经 ...