<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
//给单机按钮派发事件
document.getElementById("toRight1").onclick=function(){
//获取左边所选的option
var arr=document.getElementById("left").options;
//遍历
for(var i=0;i<arr.length;i++){
//判断是否被选中,如果被选中,则添加到右边
if(arr[i].selected){
document.getElementById("right").appendChild(arr[i]);
break;
}
}
}
//给多移按钮派发事件
document.getElementById("toRight2").onclick=function(){
//获取左边所有的option
var arr=document.getElementById("left").options;
//遍历
for(var i=0;i<arr.length;i++){
//判断是否被选中,如果被选中,则添加到右边
if(arr[i].selected){
document.getElementById("right").appendChild(arr[i]);
i--;
}
}
}
//给全部移动按钮派发事件
document.getElementById("toRight3").onclick=function(){
//获取左边所有的option
var arr=document.getElementById("left").options;
//遍历
for(var i=0;i<arr.length;){
//判断是否被选中,如果被选中,则添加到右边
if(arr[i].selected){
document.getElementById("right").appendChild(arr[i]);
}
}
}
}
</script>
左右移动
猜你喜欢
转载自blog.csdn.net/qq1424035130/article/details/84833851
今日推荐
周排行