水果选择案例
2019-05-10 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 水果选择案例 </title>
<style>
select {
width: 100px;
height: 160px;
}
</style>
</head>
<body>
<!--
下拉框默认只允许选择一个
如果要能够多选，就给它加一个行内属性mutilple
-->
<select id="selLeft" multiple>
<option>苹果</option>
<option>西瓜</option>
<option>香蕉</option>
<option>鸭梨</option>
<option>哈密瓜</option>
<option>水蜜桃</option>
<option>荔枝</option>
</select>
<button id="btn1"> >> </button>
<button id="btn2"> << </button>
<button id="btn3"> > </button>
<button id="btn4"> < </button>
<select id="selRight" multiple></select>
<script>
//找到左边下拉框
var selLeft = document.getElementById('selLeft');
// 找到右边下拉框
var selRight = document.getElementById('selRight');
// 从左全部到右的点击事件
document.getElementById('btn1').onclick = function () {
selRight.innerHTML += selLeft.innerHTML;
selLeft.innerHTML = "";
}
// 从右全部到做的点击事件
document.getElementById('btn2').onclick = function () {
selLeft.innerHTML += selRight.innerHTML;
selRight.innerHTML = "";
}
// 把左边选择的内容移动到右边
document.getElementById('btn3').onclick = function () {
for (var i = 0; i < selLeft.children.length;) {
//判断有没有被选中
if (selLeft.children[i].selected) {
//选中的这个要移动到右边
selRight.appendChild(selLeft.children[i]);
} else {
//没选中，就需要++
i++;
}
}
}
// 把右边选择的内容移动到左边
document.getElementById('btn4').onclick = function () {
for (var i = 0; selRight.children.length;) {
//判断有没有被选中
if (selRight.children[i].selected) {
//选中的这个要移动到左边
selLeft.appendChild(selRight.children[i]);
} else {
// 没选中，就需要++
i++;
}
}
}
</script>
</body>
</html>
