黑马程序员技术交流社区

标题: Html代码 [打印本页]

作者: suichuan689 时间: 2015-8-31 08:28
标题: Html代码
<!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">



  </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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2