注意:document.getElementsByTagName('h1')[0]
<!DOCTYPE html>
<html>
<head>
<title>ext3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="float: left;margin-right: 10px">
<select id="first" size="10" multiple="multiple" ondblclick="leftMove()">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</div>
<div style="float: left;margin-right: 10px">
<input id="leftone" onclick="leftone()" type="button" value="------>"/><br><br>
<input id="leftAll" onclick="leftAll()" type="button" value="====>"/><br><br>
<input id="rightone" onclick="rightone()" type="button" value="<------"/><br><br>
<input id="rightall" onclick="rightall()" type="button" value="<===="/><br>
</div>
<select id="second" size="10" multiple="multiple" ondblclick="rightMove()">
<option value="选项9">选项9</option>
</select>
</body>
<script type="text/javascript">
//双击左边的元素,移到右边
function leftMove(){
var ops = document.getElementById('first').getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
if(ops[i].selected){
document.getElementById('second').appendChild(ops[i]);
}
}
}
//双击右边的元素,移到左边
function rightMove(){
var ops = document.getElementById('second').getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
if(ops[i].selected){
document.getElementById('first').appendChild(ops[i]);
}
}
}
//选中左边的元素,移到右边
function leftone(){
var ops = document.getElementById('first').getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
if(ops[i].selected){
document.getElementById('second').appendChild(ops[i]);
i--;
}
}
}
//将左边所有的元素,移到右边
function leftAll(){
var ops = document.getElementById('first').getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
document.getElementById('second').appendChild(ops[i]);//ops[i]与ops[0]效果相同
i--;
}
}
//选中右边的元素,移到左边
function rightone(){
var ops = document.getElementById('second').getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
if(ops[i].selected){
document.getElementById('first').appendChild(ops[i]);
i--;
}
}
}
//将右边所有的元素,移到左边
function rightall(){
var ops = document.getElementById('second').getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
document.getElementById('first').appendChild(ops[i]);//ops[i]与ops[0]效果相同
i--;
}
}
</script>
</html>