列表左右移动 2017-03-23
<body>
<select id="s1" size="10" >
<option>红色</option>
<option>绿色</option>
<option>蓝色</option>
<option>黑色</option>
<option>白色</option>
</select>
<select id="s2" size="10" >
<option>苹果</option>
<option>香蕉</option>
<option>桃子</option>
<option>梨</option>
<option>橙子</option>
</select><br />
<input type="button" id="t1" value="右移" />
<input type="button" id="t2" value="左移" />
<script>
document.getElementById("t1").onclick=function(){ -----右移
var op=document.getElementById("s1").selectedOptions;---------将选中的数据赋值给op
document.getElementById("s2").appendChild(op[0]); ------表示选中的数据中索引值为0
document.getElementById("s1").removeChild(op[0]);
}
document.getElementById("t2").onclick=function(){ ----左移
var op=document.getElementById("s2").selectedOptions;
document.getElementById("s1").appendChild(op[0]);
document.getElementById("s2").removeChild(op[0]);
}
</script>
</body>
