<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width: 100px;
overflow: scroll;
}
#left{
margin-left:168px;
margin-top:140px;
}
#right{
margin-left: 420px;
margin-top: -819px;
}
table{
margin-left:12px;
margin-top:140px;
}
#btnD{
margin-left:282px;
margin-top:-310px;
}
</style>
</head>
<body>
<div>
<select id="leftSelect" size="10" onchange="" multiple="multiple" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
<option value="l">l</option>
</select>
</div>
<div id="btnD">
<table>
<tr>
<td><input type="button" onclick="selectleftOne()" value=">" /></td>
</tr>
<tr>
<td> <input type="button" onclick="selectLeftSeval()" value=">>" /></td>
</tr>
<tr>
<td> <input type="button" value=">>>" onclick="selectLeftAll()"/></td>
</tr>
<tr>
<td><input type="button" onclick="selectRightOne()" value="<" /></td>
</tr>
<tr>
<td> <input type="button" onclick="selectReftSeval()" value="<<" /></td>
</tr>
<tr>
<td> <input type="button" onclick="selectReftAll()" value="<<<" /></td>
</tr>
</table>
</div>
<div id="rightSelect">
<select id="right" size="10" multiple="multiple">
</select>
</div>
<script type="text/javascript">
var options=document.getElementsByTagName("option");//公用的
var leftSelect=document.getElementById("leftSelect");
var right=document.getElementById("right")//右边的节点
function selectleftOne(){
for(var i=0;i<options.length;i++){
if(leftSelect.options[i].selected==true){
right.appendChild(leftSelect.options[i]);
console.log(right.length);
return;
}
}
}
function selectRightOne(){
for(var i=0;i<right.options.length;i++){
if(right.options[i].selected==true){
leftSelect.appendChild(right.options[i]);
}
}
}
//从左边移除多个
function selectLeftSeval(){
// console.log("ceshi");
for(var i=0;i<leftSelect.length;i++){
if(leftSelect.options[i].selected==true){
right.appendChild(leftSelect.options[i]);
}
}
}
//从右边移除多个
function selectReftSeval(){
for(var i=0;i<right.length;i++){
if(right.options[i].selected==true){
leftSelect.appendChild(right.options[i]);
}
}
}
//从左边移除所有
function selectLeftAll(){
// console.log("ceshi");
for(var i=0;;){
right.appendChild(leftSelect.options[i]);
}
}
//从右边移除所有
function selectReftAll(){
// console.log("ceshi");
for(var i=0;;){
leftSelect.appendChild(right.options[i]);
}
}
</script>
</body>
</html>