<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:500px; height:500px} #left{ width:200px; height:500px; float:left} #zhong{ width:100px; height:500px; float:left} #right{ width:200px; height:500px; float:left} </style> </head> <body> <br /> <div id="wai"> <div id="left"> <select style="200px; height:300px" id="selleft" multiple="multiple"> <option value="山东">山东</option> <option value="淄博">淄博</option> <option value="张店">张店</option> </select> </div> <div id="zhong"> <div style="margin-left:10px; margin-top:20px"> <input style="60px; height:30px" type="button" value=">>" onclick="moveall()" /> </div> <div style="margin-left:10px; margin-top:30px"> <input style="60px; height:30px" type="button" value=">" onclick="moveone()" /> </div> </div> <div id="right"> <select id="selright" multiple="multiple" style="200px; height:300px"></select> </div> </div> <script type="text/javascript"> function moveone() { var left = document.getElementById("selleft"); var right = document.getElementById("selright"); var xz = left.value; var str = "<option value='"+xz+"'>"+xz+"</option>"; //判断 //alert(right.childNodes.item(0)); var bs = 0; for(var i=0;i<right.childNodes.length;i++) { if(right.childNodes.item(i).text==xz) { bs = 1; } } if(bs==0) { //追加 right.innerHTML = right.innerHTML+str; } } function moveall() { var left = document.getElementById("selleft"); var right = document.getElementById("selright"); right.innerHTML = left.innerHTML; } </script>