<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
<title>下拉框左右移动</title>
<script type="text/javascript">
function removeLeft(){
//1.找到第一个下拉框
var leftSelect = document.getElementById("left");
//2.找到第一个下拉框中选中的项
var selectedIndex = leftSelect.selectedIndex;//取当前选中项的下标
var selectedOption = leftSelect.options[selectedIndex];
//3.找到第二个下拉框
var rightSelect = document.getElementById("right");
//4.第二个下拉框中追加一个option
rightSelect.appendChild(selectedOption)
}
function removeLeftAll(){
//1.找到第一个下拉框
var leftSelect = document.getElementById("left");
var Options = leftSelect.options;
var rightSelect = document.getElementById("right");
//2.找到所有下拉选
// for(var i=0;i<Options.length;){
// rightSelect.appendChild(Options[i]);
// }
for(var i=Options.length-1;i>=0;i--){
rightSelect.appendChild(Options[i]);
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<select size="10" id="left">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</td>
<td>
<input type="button" style="width:50px" value="--->" onclick="removeLeft()"/><br/>
<input type="button" style="width:50px" value="===>" onclick="removeLeftAll()"/><br/>
<input type="button" style="width:50px" value="<---" onclick="removeRight()"/><br/>
<input type="button" style="width:50px" value="<===" onclick="removeRightAll()"/><br/>
</td>
<td>
<select size="10" id="right">
<option>选项9</option>
</select>
</td>
</tr>
</table>
</body>
</html>练习：下拉列表左移右移
猜你喜欢
转载自blog.csdn.net/Ada_yangyang/article/details/81295035
今日推荐
周排行