<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>123</title> <style type="text/css"> *{ margin:0px auto; padding:0px; } /*#date{ 200px; height:20px; }*/ #wai{ width:500px; height:500px; } #zuo{ float:left; width:200px; height:500px; } #zhong{ float:left; width:100px; height:500px; } #you{ float:left; width:200px; height:500px; } </style> </head> <body> <div id="wai"> <div id="zuo"> <select multiple="multiple" id="znr" style="200px; height:200px;"> <option value="山东">山东</option> <option value="淄博">淄博</option> <option value="张店">张店</option> </select> </div> <div id="zhong"> <div style="margin-left:25px; margin-top:20px;"> <input type="button" value=">>" style="50px;" onclick="Moveall()" /> </div> <div style="margin-left:25px; margin-top:20px;"> <input type="button" value=">" style="50px;" onclick="Moveone()"/> </div> </div> <div id="you"> <select id="ynr" multiple="multiple" style="200px; height:200px;"> </select> </div> </div> </body> </html> <script type="text/javascript"> function Moveone() { var left = document.getElementById("znr");//获取左边列表的所有值 var right = document.getElementById("ynr");//获取右边列表的所有值 var lz = left.value;//点击选中的值付给lz var str;//声明变量 str="<option value='"+lz+"'>"+lz+"</option>";//拼接字符串付给str var bs = 0;//声明变量bs for(var i=0;i<=right.length;i++)//循环条件为i<右边select里所有值得长度(有几个option长度就位几) { if(bs==right.length)//在bs=右边长度前不会走本条 { right.innerHTML = right.innerHTML+str; break;//添加一遍后跳出; } else if(right[i].value==lz)//右边所有值和点击的值对比 { break;//有同样的跳出 } bs++;//for循环一遍bs+1; } } function Moveall() { var left = document.getElementById("znr"); var right = document.getElementById("ynr"); right.innerHTML = left.innerHTML; } </script>