<!DOCTYPE html>
<html>
<head>
<title>MyHtml_06.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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div style="float: left;">
<div>
<select id="select1" multiple="multiple" style="width: 200px;height: 200px;">
<option>足球</option>
<option>篮球</option>
<option>排球</option>
<option>羽毛球</option>
<option>乒乓球</option>
</select>
</div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
<div>
<div>
<select id="select2" multiple="multiple" style="width: 200px;height: 200px;">
<option>棒球</option>
<option>高尔夫球</option>
</select>
</div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</body>
<script type="text/javascript">
function selToRight(){
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
var options1=select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++){
if(options1[i].selected==true){
select2.appendChild(options1[i]);
i--;
}
}
}
function allToRight(){
var select11=document.getElementById("select1");
var select21=document.getElementById("select2");
var options11=select11.getElementsByTagName("option");
for(var j=0;j<options11.length;j++){
select21.appendChild(options11[j]);
j--;
}
}
function selToLeft(){
var select22=document.getElementById("select2");
var select12=document.getElementById("select1");
var ops=select22.getElementsByTagName("option");
for(var k=0;k<ops.length;k++){
if(ops[k].selected==true){
select12.appendChild(ops[k]);
k--;
}
}
}
function allToLeft(){
select23=document.getElementById("select2");
select13=document.getElementById("select1");
var ops1=select23.getElementsByTagName("option");
for(var m=0;m<ops1.length;m++){
select13.appendChild(ops1[m]);
m--;
}
}
</script>
</html> |
|
收藏
淘帖
踩
