<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> select{ width:150px; height:200px; float:left; } div{ width:100px; height:200px; float:left; } </style> </head> <body> <select name="" id="cid" multiple> <option value="0">琦琦</option> <option value="1">旺儒</option> <option value="3">三金</option> <option value="4">狗哥</option> <option value="5">金铭</option> <option value="6">想想</option> <option value="7">令锋</option> </select> <div> <button onclick="func('cid','mid')">>>></button> <button onclick="func('mid','cid')"><<<</button> </div> <select name="" id="mid" multiple></select> </body> <script type="text/javascript"> function func(id,id1){ //逻辑关系 //当你点击>>> obj 是cid //当你点击<<< obj 是mid obj = document.getElementById(id); //当你点击>>> obj1 是mid //当你点击<<< obj1是cid obj1 = document.getElementById(id1); //获取到全部的select所有的option标签内容,option是可以获取到当前对象下面所有的option标签的 op = obj.options; //遍历所有的option标签,得到option单独的对象 for(var i=0;i<op.length;i++){ if(op[i].selected){ //取消默认选中的内容 op[i].selected = false; //移动option标签 obj1.add(op[i]); //因为我们的数组每次都要重新排序,所以我们只移动第一个 i--; } } } </script> </html>
点击 "运行实例" 按钮查看在线实例