<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
select{
width:200px;
height:200px;
background-color:#33cccc;
font-size:20px;
}
</style>
</head>
<body>
<select id="all" size="5" multiple="multiple">
<option>苹果</option>
<option>橘子</option>
<option>梨</option>
<option>西瓜</option>
<option>水蜜桃</option>
</select>
<input type="button" value=">>" id="btn1">
<input type="button" value="<<" id="btn2">
<input type="button" value=">" id="btn3">
<input type="button" value="<" id="btn4">
<select id="choose" multiple="multiple"></select>
<script>
function my$(id){return document.getElementById(id)};
//获取元素
var all = my$("all");
var choose = my$("choose");
var btn1 = my$("btn1");
var btn2 = my$("btn2");
var btn3 = my$("btn3");
var btn4 = my$("btn4");
//全选
//给第一个按钮添加点击事件，让all中的所有子元素移动到choose中
btn1.onclick = function(){
//获取all中所有的子元素
var opts = all.children;//内部的元素时动态添加的
//获取最开始的数组的个数
var n = opts.length;
console.log(n);
//将所有的opts中的元素添加给choose
for(var i = 0; i < n; i++){
choose.appendChild(opts[0]);
}
};
//单选移动
//给第一个按钮添加点击事件，让all中的所有子元素移动到choose中
btn3.onclick = function(){
//获取all中所有的子元素
var opts = all.children;//内部的元素时动态添加的
//移动的内容希望可以是固定的一个数组中的项
var arr = [];
//通过判断条件，往arr中添加需要移动的元素
//获取最开始的数组的个数
var n = opts.length;
//console.log(n);
//将所有的opts中的元素添加给choose
for(var i = 0; i < opts.length; i++){
if(opts[i].selected === true){
arr.push(opts[i]);
}
}
//对需要移动的数组进行遍历
for(var j = 0; j < arr.length; j++){
choose.appendChild(arr[j]);
arr[j].selected = false;
}
};
//全选
//给第一个按钮添加点击事件，让all中的所有子元素移动到choose中
btn2.onclick = function(){
//获取choose中所有的子元素
var opts = choose.children;//内部的元素时动态添加的
//获取最开始的数组的个数
var n = opts.length;
//将所有的opts中的元素添加给all
for(var i = 0; i < n; i++){
all.appendChild(opts[0]);
}
};
//单选移动
//给第一个按钮添加点击事件，让all中的所有子元素移动到choose中
btn4.onclick = function(){
//获取all中所有的子元素
var opts = choose.children;//内部的元素时动态添加的
//移动的内容希望可以是固定的一个数组中的项
var arr = [];
//通过判断条件，往arr中添加需要移动的元素
//获取最开始的数组的个数
var n = opts.length;
//console.log(n);
//将所有的opts中的元素添加给choose
for(var i = 0; i < opts.length; i++){
if(opts[i].selected === true){
arr.push(opts[i]);
}
}
//对需要移动的数组进行遍历
for(var j = 0; j < arr.length; j++){
all.appendChild(arr[j]);
arr[j].selected = false;
}
};
</script>
</body>
</html>
