实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
select{
width:150px;
height:200px;
float:left;
}
div{
width:100px;
height:200px;
float:left;
}
</style>
</head>
<body>
<select name="" id="cid" multiple>
<option value="0">琦琦</option>
<option value="1">旺儒</option>
<option value="3">三金</option>
<option value="4">狗哥</option>
<option value="5">金铭</option>
<option value="6">想想</option>
<option value="7">令锋</option>
</select>
<div>
<button onclick="func('cid','mid')">>>></button>
<button onclick="func('mid','cid')"><<<</button>
</div>
<select name="" id="mid" multiple></select>
</body>
<script type="text/javascript">
function func(id,id1){
//逻辑关系
//当你点击>>> obj 是cid
//当你点击<<< obj 是mid
obj = document.getElementById(id);
//当你点击>>> obj1 是mid
//当你点击<<< obj1是cid
obj1 = document.getElementById(id1);
//获取到全部的select所有的option标签内容，option是可以获取到当前对象下面所有的option标签的
op = obj.options;
//遍历所有的option标签，得到option单独的对象
for(var i=0;i<op.length;i++){
if(op[i].selected){
//取消默认选中的内容
op[i].selected = false;
//移动option标签
obj1.add(op[i]);
//因为我们的数组每次都要重新排序，所以我们只移动第一个
i--;
}
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
